How to render an array of strings using map in ReactJs?

Question

I basically want to put each string in the array in a separated div, I'm trying to do this but is not rendering anything

export default class Loja extends Component {
      state = {
        loja: {},
        lojaInfo: {},
        category: []
      }

      async componentDidMount() {
        const { id } = this.props.match.params;

        const response = await api.get(`/stores/${id}`);

        const { category, ...lojaInfo } = response.data

        this.setState({ loja: category, lojaInfo });

        console.log(category)

      }

      render() {
        const { category } = this.state;


        return (

            <p>{category.map(cat => <div>{cat}</div>)}</p>

        );
      }
    }

The console.log(category) shows this:

You're not updating the category part of the state in this line this.setState({ loja: category, lojaInfo }); — Edgar Henriquez
– Edgar Henriquez, Commented Dec 10, 2019 at 1:34

Edgar Henriquez · Accepted Answer · 2019-12-10 01:39:31Z

1

The error is that you're updating 2 properties inside the componentDidMount, one is loja: category and the second property is lojaInfo, but in the render() method you're accessing this.state.category which still is an empty string.

What you want to do instead is, inside of your componentDidMount update your state like this:

this.setState({
  category,
  lojaInfo,
});

edited Dec 10, 2019 at 1:39

answered Dec 10, 2019 at 1:36

Edgar Henriquez

1,3731 gold badge15 silver badges18 bronze badges

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

Comments

Zheng · Accepted Answer · 2019-12-10 01:39:35Z

1

you've added your category into the loja object in the state.

something like this should work:

async componentDidMount() {
    const { id } = this.props.match.params;
    const response = await api.get(`/stores/${id}`);
    const { category, ...lojaInfo } = response.data
    this.setState({ category, lojaInfo });
}

answered Dec 10, 2019 at 1:39

Zheng

764 bronze badges

Collectives™ on Stack Overflow

How to render an array of strings using map in ReactJs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related