List is not being properly loaded in a reactjs program

Question

I have the following code:

state = {
    name: 'Teste II', 
    produto: null,
    alternativas: null,
    loading_produto: true,
    loading_alternativas: true,
    showPopup: false,
};

constructor( props ) {
    super( props );     
}

async componentDidMount(){
    const url = "http://www.mocky.io/v2/5db857da3b0000770035f09b";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({produto: data.suggestions[0], loading_produto: false})
    this.setState({alternativas: data.choices, loading_alternativas: false})
    console.log(this.state.produto.product_data.title);
}

render() {

    const lista = this.state.alternativas;


    if(!this.state.loading_alternativas){

    this.texts = lista.map((text, key) => {
        console.log('chegou aqui');

        <li key={text.id}>{text.name}</li>
    });
}
return (...<ul>{this.texts}</ul>... )

It seems okay for me. Indeed, the code "console.log('chegou aqui');" is being executed. However the command "

{this.texts}

" is not printing anything.

What is the problem?

Note that the API is being simulated by the link: API

stackoverfloweth · Accepted Answer · 2019-10-29 15:41:31Z

3

you need to add return

this.texts = lista.map((text, key) => {
    console.log('chegou aqui');

    return (<li key={text.id}>{text.name}</li>)
});

answered Oct 29, 2019 at 15:41

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

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

1 Comment

Siqueira Over a year ago

Thanks! I am starting to use it now.

hawks · Accepted Answer · 2019-10-29 15:42:13Z

0

You should add return in the map function.

this.texts = lista.map((text, key) => {
    console.log('chegou aqui');

    return <li key={text.id}>{text.name}</li>
});

answered Oct 29, 2019 at 15:42

hawks

9411 gold badge9 silver badges21 bronze badges

Comments

Joe Lloyd · Accepted Answer · 2019-10-29 15:42:48Z

0

Rerendering only happens on state or prop change

You're assigning class attributes to react elements. This is a no go in react. Render from the state like this

<ul>
{
  this.state.alternativas && this.state.alternativas.map((text, key) => <li key={text.id}>{text.name}</li>
}
</ul>

answered Oct 29, 2019 at 15:42

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

Collectives™ on Stack Overflow

List is not being properly loaded in a reactjs program

3 Answers 3

1 Comment

Comments

Rerendering only happens on state or prop change

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Rerendering only happens on state or prop change

Comments

Your Answer

Sign up or log in

Post as a guest

Related