reactjs - how can I select only one component of my array of component -

this code here works don't know how click 1 of component in >the array code can change color. want know how can not change color when change in 1 >component future answer

import react, { component } 'react';      export default class seats extends component {      constructor() {          super()          this.state = {              status: false,          };      }            changecolor(event) {          if (this.state.status === false) {              event.currenttarget.style.backgroundcolor = '#d70202';              this.state.status = true;          }else {              this.state.status = false;               event.currenttarget.style.backgroundcolor = '#0cb607';          }              }             render() {          let array = [];          (var = 0; < 5; i++) {              array[i] = i;          }                    const list = array.map((d, index) => <div classname="seat"      onclick={this.changecolor.bind(this)} key={index}></div>);          return (              <div>                  {list}              </div>          );      }  }            

.seat {      background-color: #0cb607;       border: 1px solid black;      height: 90px;      width: 90px;  }

there 2 problems here, need resolved separately:

1. instead of using this.state.status = true|false should use this.setstate({ status: true|false }). forces re-render.

2. in current approach, managing state via manipulating dom directly, setting style.backgroundcolor. blown away next time component renders.

to address second issue, suggest storing array of items manipulating state @ component level. example:

js:

export default class seats extends react.component {   constructor() {     super()      const seats = [...array(5)].map(() => ({ status: false }))     this.state = { seats }   }    handleseatclick(index) {     const seats = this.state.seats     const seat = seats[index]     seat.status = !seat.status      seats[index] = seat      this.setstate({ seats })   }    render() {     return (       <div>{list.map((seat, index) =>          <div classname={`seat ${seat.status ? 'highlight' : ''}`}              onclick={this.handleseatclick.bind(index)}         ></div>       </div>     )   } } 

css:

.seat {   background-color: #0cb607;   border: 1px solid black;   height: 90px;   width: 90px; }  .seat.highlight {   background-color: #d70202; } 

in example, we're persisting array of seats in component's state. if getting pre-defined list of seats passed in, in future, replace line creates [...array(5)]... bit instead reads props being passed in, or loads ajax call, etc.

because seats persisted own state, array, can inspect state when rendering determine whether output highlight css class - applies color.

one other thing can refactor (which didn't do, keep clear explanation) rid of .bind in render entirely. doing anti-pattern, re-create new functions every item in list, every time renders.