score:2

Accepted answer

I would do something like this:

render(){
    const titles = ['title1', 'title2', 'title3', 'title4'];

  return(
    {
     titles.map((title, i)=>(
     <Button title={title} key={i} 
             handleToUpdate={()=>this.handleToUpdate(i)} />
               ))
    }
} 

in your handleToUpdate function/method, you should then use the parameter i to determine what is done. You could also use a parameter like (e)=>this.handleToUpdate(e) and then name the button with the title and access the name via e.target as follows:

handleToUpdate(e){
   const {name} = e.target;
   this.setState({[name]: true});
}

You can replace true in set state to whatever you want, however using a boolean is best if you are doing an action with a single potential result, i.e. always setting state in the same way as you presented in your question.

To pass the function with an id directly in the case of different locations for your buttons do this:

<Button title={title1} handleToUpdate={()=>this.handleToUpdate(1)} />

where 1 is an index with any number to plugin, or any key to use in a switch statement.

In your Button component change the onClick to:

<button onClick={this.props.handleToUpdate}> {this.props.title} </button>

You are basically binding the parameter to the function directly as in the map function I have above.

With this solution, you can just do a switch statement like in Ashley Brown's answer.

score:1

You can use a switch to determine which button was clicked based on the id you passed in... Alternatively you could have passed in the event if you hadn't have passed in the id already. Just be sure to set up the props if you haven't already...

export default class Button extends React.Component {
  render() {
    var handleToUpdate = this.props.handleToUpdate;
    return (
      <button onClick={() => handleToUpdate(this.id)}> // <- this id you passed in
        {this.props.title}
      </button>
    );
  }
}


<Button id={1} title={title1} handleToUpdate={handleToUpdate.bind(this)} />
<Button id={2} title={title2} handleToUpdate={handleToUpdate.bind(this)} />

handleToUpdate(id) { // <-- id passed in
  switch(id) {
   case 1: // if id === 1
    //setState({})
   break;

   case 2: // if id === 2
    //setState({})
   break;
   // etc
 } 
}

score:3

If you are passing the id to the Button component, here is an alternative approach.

const buttons = [
  { id: 1, title: "test1" },
  { id: 2, title: "test2" },
  { id: 3, title: "test3" },
];

class App extends React.Component {
  state = {
    clicked: "",
  };

  onUpdate = ( id ) => {
    this.setState( { clicked: id } );
  };

  render() {
    console.log( this.state );
    return (
      <div>
        {buttons.map( button => (
          <Button
            key={button.id}
            button={button}
            onUpdate={this.onUpdate}
          />
        ) )}
      </div>
    );
  }
}

const Button = ( props ) => {
  const { button, onUpdate } = props;
  const handleUpdate = () => onUpdate( button.id );
  return <button onClick={handleUpdate}>{button.title}</button>;
};

ReactDOM.render( <App />, document.getElementById( "root" ) );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>


Related Query

More Query from same tag