How to use setState and eventHandler both at a time for arrays in reactjs?

Question

I'm new to React and I'm unable to use setState with eventHandlerMethod ( event.target.value ). My array is not getting modified. The same previous value is being printed everytime without changing anything.

This is my code

 class App extends Component {
  state={
    userName : ["prakash" , "Shree Harsha"]
  }

  clickChangeListener = (event) =>{
   // console.log(this.state.userName[0])
    this.setState=({ userName : [event.target.value , event.target.value]});
  }
   render(){
    return (
      <div className="App">
        <h1>Welcome to react app</h1>
        <UserInput click={this.clickChangeListener}/>
       <UserOutput  
                   name1={this.state.userName[0]} 
                   name2={this.state.userName[1]} />
       <UserOutput name1={this.state.userName[0]} 
                   name2={this.state.userName[1]} />
       <UserOutput name1={this.state.userName[0]} 
                   name2={this.state.userName[1]} />
      </div>
    );
  }
}

What changes should I make so that my code works?

Answer 1

Just remove the = char.

Like the following:

this.setState({ userName : [event.target.value , event.target.value]});

setState is a function, read further here: https://reactjs.org/docs/react-component.html#setstate

I hope that helps!