how to iterate information in the state in React

Question

Best regards. This is my first question. I am new to react and I do not know how to do with this doubt.

I make a request and I keep the answer in the state. Now I can't deserialize the json and use it within the app. I have tried several ways that recommend online but nothing. if I make a json.stringify, I can see the information, that is, the request is correct.

this is the request I receive from the api:

{"boards":[{"items":[{"id":"John Smith","column_values":[{"text":"Caracas, Distrito Capital, Venezuela"}]},{"id":"Edith Ruza","column_values":[{"text":"Buenos Aires, CABA, Argentina"}]},{"id":"david Rios","column_values":[{"text":"Perth Australia Occidental, Australia"}]},{"id":"Peter Doe","column_values":[{"text":"Calgary, Alberta, Canadá"}]},{"id":"Mary Jones","column_values":[{"text":"London, Reino Unido"}]},{"id":"Lionel Messi","column_values":[{"text":"París, Francia"}]},{"id":"Samy Forte","column_values":[{"text":"Mexico City, CDMX, México"}]},{"id":"Tadeo Carthy","column_values":[{"text":"Tel Aviv, Israel"}]}]}]}

and this is my code that not work:

class App extends React.Component {
  constructor(props) {
    super(props);

    // Default state
    this.state = {
      setData:{},
      settings: {},
      myData: {},      
    };
  }
  com
  componentDidMount() {
    
    monday
      .api('query { boards( ids : 2664704591 ) { items { id : name column_values(ids : "ubicaci_n") { text }}}}')
          .then(res => {this.setState({myData: res.data})});
  }
  
  render() {    
    return (
      
      <div className="App">
        <AttentionBox
          title="hola"
          text="Let's start building your amazing app, which will change the world!"          
        />
        <div className="btn btn-primary"></div>
        <button className="btn btn-warning"></button>
        <div>
          {this.state.myData.map((property) => {
            return (<div>property</div>)
          })}
        </div>        
      </div>
    );
  }
}

export default App;

I would greatly appreciate any clue to move forward

You most likely need `myData: JSON.parse(res.data)` (*if* res.data is a JSON string). However you cannot .map() over something that isn't an array. `this.state.myData.boards` should be an array if everything works out, but you'll also need `myData: { boards: [] }` in your initial state or your render code will bork — , Jun 21 '22 at 15:55

score 0 · Answer 1 · answered Jun 21 '22 at 16:22

As @ChrisG mentioned, you first need to parse the json string (provided it's a valid json string—it appears to be) into a js object by using JSON.parse(res.data), then you have 2 levels of nesting in your data structure over which you'd have to map on:

{ this.state.myData?.boards && // however you want to guard this part
  <div>
    {this.state.myData.boards.map(board =>
      <div>{board.items.map(item => <div>{item}</div>)}</div>
    }
  </div>
}

Another note is that because myData could either be {} or have { boards: [] }, you should have some form of guard on whether myData has been returned. This could be an if statement, or it could use javascript's falsey logic with a check && result syntax as I used above.

A couple more (opinionated) tips because you're new:

Try to switch to the functional components rather than the class-based components you've used here
You're probably going to want to specify a few lower level components to deal with these mappings so your code doesn't get extremely cluttered

how to iterate information in the state in React

1 Answers1