stuck at Displaying Updated Array Data - reactjs

Question

I have an array List and I'm using the .push() method to add new elements to it and then concat the input with List in Onclickadd method but its not updating the array to display the items in to-do
import React from 'react'
import './App.css'
class App extends React.Component {
constructor(){
super()
this.state={
List: ['potato']
}
}
onAddChange=(event)=>{
this.setState=({
input: event.target.value
})
}
Onclickadd=()=>{
console.log('clicked')
this.setState=({List: this.state.List.concat(this.state.input)})
}
render (){
return (
<div className="App">
<h1>TODO LIST</h1>
<input onChange={this.onAddChange} type='text' placeholder='Add Items'/>
<button onClick={this.Onclickadd} className='btn'>Add</button>
<ol>
{this.state.List.map((items, keys) => {
return <li key={keys}> {items}</li>
})}
</ol>
</div>
);
}
}
export default App;

Answer 1

this.setState is an function witch expects an object, you are trying to assign the value, instead off this.setState= use;
this.setState({
input: event.target.value
})
class App extends React.Component {
constructor(){
super()
this.state={
List: ['potato']
}
}
onAddChange=(event)=>{
this.setState({
input: event.target.value
})
}
Onclickadd=()=>{
this.setState({List: this.state.List.concat(this.state.input)})
}
render (){
return (
<div className="App">
<h1>TODO LIST</h1>
<input onChange={this.onAddChange} type='text' placeholder='Add Items'/>
<button onClick={this.Onclickadd} className='btn'>Add</button>
<ol>
{this.state.List.map((items, keys) => {
return <li key={keys}> {items}</li>
})}
</ol>
</div>
);
}
}
ReactDOM.render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
More info about setState can be found here

Answer 2

this.setState=... is the issue in your code. It is a function call there is no assignment using =.
You have done the same mistake in two places
Change the onAddChange to
onAddChange=(event)=>{
this.setState({
input: event.target.value
})
}
and
Onclickadd to
Onclickadd=()=>{
console.log('clicked')
this.setState({List: this.state.List.concat(this.state.input)})
}
Working example => https://codesandbox.io/s/intelligent-galois-ih7w4?file=/src/App.js:294-418

Answer 3

I recommend you to add value={this.state.input} to the input like following :
<input value={this.state.input} onChange={this.onAddChange} type='text' placeholder='Add Items'/>
The syntax of this.setState() is not right, it's like this :
this.setState({ List: this.state.List.concat(this.state.input) })
this.setState({ input: event.target.value })