Changing tool dynamically randomly ends up with undefined tool sometimes

[garretthogan]

handleClickTool(event) {
    const value = event.target.innerText;
    this.setState({
      selectedTool: value
    });
  }
render() {
  console.log(this.state.selectedTool);
  const width = window.innerWidth;
  const height = window.innerHeight;
  return (
    <div>
      <ToolPanel handleClickTool={this.handleClickTool} selectedTool={this.state.selectedTool} />
      <SketchField
        ref={(c) => this._sketch = c} 
        style={{position: 'absolute'}}
        width={width} 
        height={height} 
        tool={this.state.selectedTool}
        color='black'
        lineWidth={3}
      />
    </div>
  );
}

Selected tool always has a valid string value but the tool will randomly end up being a pencil even when the valid tool is supplied.

[inf3cti0n95]

Can you recreate the bug and post the link to it.

[tbolis]

Is this still valid?

[inf3cti0n95]

@garretthogan I believe the value you are passing to the tool prop in not one of the predefined tools which the SketchField Supports and that is why it is using Pencil tool as a fallback. The Value for tool should be one of the listed below

• Circle: 'circle'
• Line: 'line'
• Pencil: 'pencil'
• Rectangle: 'rectangle'
• Select: 'select'
• Pan: 'pan'