score:2

Accepted answer

finally, i solve this problem. maybe this is because setstate function operates asynchronously. i fixed my code like this and working well.

export default class analyslinechart extends component {

  constructor(props){
    super(props);
    this.selectbar = this.selectbar.bind(this);
    this.state = {
      labels: []
    }
  }

  selectbar(event) {
    //do something......
  }

  componentdidmount(){
      this.setstate({
          labels: this.props.selectablefields
      });
  }

  render() {
    return (
      <linechart width={300} height={250} data={this.props.data}>
        <xaxis datakey="date"/>
        <yaxis/>
        <legend onclick={this.selectbar} />
        {  
          this.state.labels.map((label, index) => (
            <line key={index} type="monotone" datakey={label.key}  stroke={label.color} />
          ))
        }
      </linechart>
    );
  }
}

score:0

i don't think you are describing your issue clearly enough.

normally what you'd do is what you did which is mapping this.props.selectablefields because saving that prop into state seems like an overkill.....

what is it exactly that you want to achieve when the legend component is clicked on?


Related Query

More Query from same tag