CODEWITHSUNDEEP
javascriptreactjs
suuuustt
suuuustt

Reputation: 85

How to invoke button click in List in Reactjs

I want to have 3 buttons and 3 related components . So that when button click show its related component . Here is my code :

Main Component : 

      class Main extends Component {   constructor(props) {
        super(props);
        this.state = {
          show: false,
        }}  

      onClick(e) {
        e.preventDefault()
        console.log(e.target.id)
        this.setState({ show: !this.state.show });   }  

     renderTabs() {
        var child = this.props.child;
        var items = [];
        __.forEach(child, (item, index) => {
          items.push(
            <div>
              <Button id={index} onClick={(e) => this.onClick(e)}>{item.data}</Button>
              {this.state.show ? (
                <CropComponent title={item.data} opts={item.opts} data={item.child} />
              ) : null}
            </div>
          );
        });
        return items;  
      } 
    render() {
        var opts = this.props.opts;
        return (
          <div>
            {this.renderTabs()}
          </div>
        )} 
    }

    export default Main;

And here is my CropComponent :

 class CropComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {   
    return (
        <div>hello {this.props.data}</div>      
    );
  }
}

export default CropComponent;

Here are my buttons how can i show its related component when click on a button and hide it on re-click the same button ?

TAB

Upvotes: 1

Views: 48

Answers (1)

gdh
gdh

Reputation: 13682

Maintain a show state with initial value as -1. Supply event and index to onClick. In onClick do setState of show as index.

Check if show === index and render the corresponding component.

Like this

this.state = {
    show: -1
}  

onClick(e,index) {
    e.preventDefault()
    this.setState({ show: show===index? -1 :  index});   
}  


__.forEach(child, (item, index) => {
    items.push(
      <div>
        <Button id={index} onClick={(e) => this.onClick(e,index)}>{item.data}</Button>
        {this.state.show === index ? (
          <CropComponent title={item.data} opts={item.opts} data={item.child} />
        ) : null}
      </div>
    );
});

Edit: updated the answer based on helpful comment by @Tony Nguyen

Upvotes: 1

Related Questions