How to correctly iterate over a JSON stored in state using ReactJS?

Question

I want to iterate over my jsondata to remove elements but I get the following error this.state.jsondata is not iterable. I understand a bit the problem and for what I understand I must iterate over the items inside this.state.jsondatabut I can't figure out how to fix it. The error appears where I try to make a separate copy of the jsondata

export default class Success extends React.Component {

    constructor(props) {
        super();
        if (props.location.state) {
            this.state = {
                jsondata: props.location.state.referrer,
                upload: true
                
            } //put jsons data in state object
            toast.success('Upload success')
        } else {
            this.state = {
                upload: false
            }
        }
    }   
    
    removeData(e) {
      console.log(e)
      var array = [...this.state.jsondata]; // make a separate copy
      var index = e;
      if (index !== -1) {
        array.splice(index, 1);
        this.setState({jsondata: array});
      }
    }

    render() {
        const occurrenceMap = Object.values(this.state.jsondata.prediction).reduce((finalMap, item) => {
          finalMap[item] = ++finalMap[item] || 1; 
          
          return finalMap;
        } , {})

        console.log(occurrenceMap)
        
        if (!this.state.upload) {
            return <Redirect push to={{
                pathname: "/"
            }}/>
        } else return (
            <div className="container">                              
                <div className="row">
                    <Table striped bordered hover>
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Label</th>
                          <th>Text</th>
                          <th>Prediction</th>
                          <th>Validation</th>
                        </tr>
                      </thead>
                      <tbody>
                        {Object.keys(this.state.jsondata.label).map(k =>
                            <tr>
                                <td>{k}</td>
                                <td>{this.state.jsondata.label[k]}</td>
                                <td>{this.state.jsondata.text[k]}</td>
                                <td>{this.state.jsondata.prediction[k]}</td>
                                <td>
                                    <Button variant="success" onClick={() => { alert('Validation') }}>Valider</Button>{' '}
                                    <Button variant="danger" onClick={() => { this.removeData(k) }}>Annuler</Button>
                                </td>
                            </tr>
                        )}                  
                      </tbody>
                    </Table>
                </div>
            </div>
        )
    }
}

Here is jsondata:

{label: {…}, text: {…}, prediction: {…}}
label: {0: 0, 1: 0, 2: 0, 3: 0, 4: 0}
prediction: {0: 2, 1: 2, 2: 2, 3: 2, 4: 2}
text: {0: "- abc", 1: "abc", 2: "abc", 3: "abc", 4: "abc"}
__proto__: Object

Answer 1

Your this.state.jsonData is not an array so you can't spread it inside [] .

const removeData = (keyToRemove) => {
// create a deep copy of the object
const clonedJsonData = JSON.parse(JSON.stringify(this.state.jsonData))
// now mutate this cloned object directly
Object.keys(clonedJsonData).forEach(key => delete clonedJsonData[key][keyToRemove])
// set the state
this.setState({jsondata: clonedJsonData})
}