Mapping Through an Array w/ React and Bootstrap

Question

I am trying to map JSON from an API call to a return using bootstrap. I want the name to map over one by one to all the columns and rows until all the data has been displayed. Currently, it is mapping all the data(names) in all 3 columns.

componentDidMount() {
    fetch(API + 'ts=' + date + 'apikey=' + pubKey + 'hash=' + hash)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            char: result.data.results,
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }

      )
  }


  render() {
    const { error, isLoaded, char } = this.state;
    return (
      char.map(char => 
        <Container>
          <Row>
          <Col md="4"> <h2>{char.name}</h2></Col>
          <Col md="4"> <h2>{char.name}</h2></Col>
          <Col md="4"> <h2>{char.name}</h2></Col>
          </Row>
        </Container>
      )
    )
  }
}

"want the name to map over one by one to all the columns and rows". What do you mean by this? — JMadelaine
– JMadelaine, Commented Jan 2, 2020 at 4:02
It may be helpful to include the JSON result/results array and what properties you want mapped. It's currently unclear what your expected result should be. What do you want mapped "one-by-one"? — Drew Reese
– Drew Reese, Commented Jan 2, 2020 at 4:03

Drew Reese · Accepted Answer · 2020-01-02 04:35:21Z

2

If I understood correctly, if you are trying to map through all the data and want to display it inside grid. You should do the following.

render() {
    const { error, isLoaded, char } = this.state;
    return (
        <Container>
          <Row>
           { char.map(char => (<Col md="4"> <h2>{char.name}</h2></Col> ) }
          </Row>
        </Container>
    )
}

edited Jan 2, 2020 at 4:35

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

answered Jan 2, 2020 at 4:03

Ayushya

1,9451 gold badge12 silver badges16 bronze badges

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

3 Comments

BOPMT Over a year ago

That seemed to be it. Thank you !! Just curious did you find documentation on this online? I looked forever trying to find a solution but couldn't.

Ayushya Over a year ago

I just read your mind :P. I have some experience with the Grid System and the Responsiveness.

Ayushya Over a year ago

Also do accept the answer so that the other users need not invest their time for finding the correct solution. :)

Collectives™ on Stack Overflow

Mapping Through an Array w/ React and Bootstrap

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related