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

how does this.state.jsondata looks like ? can you paste the sample data of it ? Looks like this.state.jsondata is not an array . — Shyam
– Shyam, Commented Jun 7, 2021 at 13:28
so if i want to remove the key 1 . should i remove it from label , prediction and text ? or only label ? — Shyam
– Shyam, Commented Jun 7, 2021 at 13:40
Yes it should remove on every categories so if I want to remove the key 1 it should be removed from label + prediction + text — J.erome
– J.erome, Commented Jun 7, 2021 at 13:41

Shyam · Accepted Answer · 2021-06-07 13:49:19Z

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})
}

answered Jun 7, 2021 at 13:49

Shyam

5,5071 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J.erome Over a year ago

Yes it works just had to fix some typo. Thank you very much !

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related