React Input Type not editable

JavaScript
1

Why can’t type in the input field?

I have a problem like this:

import React, { Component } from 'react';
import  Operations from './operations.json';
import Variables from './variables.json';

class App extends React.Component {
constructor(props) {
        super(props);
        this.state = {
            operations: Operations,
            variables: Variables,
            ex:[]
        };
    }

 handleClick(element) {
     console.log(element);
     let newArr=[...this.state.ex];
     newArr.push(element);   
     this.setState({ex: newArr});
     console.log(this.state.ex);
  }

 handleChange(event) {
     let newArr=[...this.state.ex];
     newArr.push(event.target.value);
    this.setState({ex:newState});
if(typeof(event.target.value) === 'number'){
     let newArr=[...this.state.ex];
     newArr.push(event.target.value);
    this.setState({ex:newArr});
}
else{
event.target.value:null
}
  
}

  render () { 
  	return (
    	<div className={"parent"}>
      {
    	  Object.keys(this.state.operations).map(key => {
        	return <button onClick={this.handleClick.bind(this,this.state.operations[key])} className={"button"}> {key} {this.state.operations[key]}</button>
       })
      }

<br/>
      {
        Object.keys(this.state.variables).map(key => {
          return <button onClick={this.handleClick.bind(this,this.state.variables[key])} className={"button"}> {key} {this.state.variables[key]}</button>
        })
      }

<br/>
<input onChange={this.handleChange.bind(this)} value={this.state.ex}/>

    	</div>
    )
}
}

export default App;
2

The value attribute of an input tag must be a string. Currently, you are trying to display this.state.ex, which is an array.

3

I tried setting it to a string but I can’t edit the string anyway because the onChange method doesn’t get the index of where the key has been pressed so I have always to add it to the last element and when Backspace is clicked returns the previous element.

4

What you are trying to do is very similar to this challenge on FCC:

https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-input

I recommend you work through this challenge, then it will become clear what to do in your own code. If the challenge is too hard, then start at the beginning of the React challenges and work through them one by one.