React JS onClick event handler

Question

I have

var TestApp = React.createClass({
      getComponent: function(){
          console.log(this.props);
      },
      render: function(){
        retur         


        

Answer 1

class FrontendSkillList extends React.Component {
  constructor() {
    super();
    this.state = { selectedSkill: {} };
  }
  render() {
    return (
      

        {this.props.skills.map((skill, i) => (
            

            {skill.name}
            
        ))}
      
    );
  }

  selectSkill(selected) {
    if (selected.id !== this.state.selectedSkill.id) {
      this.setState({ selectedSkill: selected });
    } else {
      this.setState({ selectedSkill: {} });
    }
  }
}

const data = [
  { id: "1", name: "HTML5" },
  { id: "2", name: "CSS3" },
  { id: "3", name: "ES6 & ES7" }
];
const element = (
  

    
Frontend Skill List
    
  
);
ReactDOM.render(element, document.getElementById("root"));

.selected {
  background-color: rgba(217, 83, 79, 0.8);
}

@user544079 Hope this demo can help :) I recommend changing background color by toggling classname.