Data is showing in console but not in screen - reactjs

Question

why am i not seeing the data in my screen when I map over "this.state.viciados" if i can see the data in the console? I have seen this problem in stack overflow but the only answer in that qustion doesn't work.

class App extends Component {
  constructor(props) {
super(props);
this.state = {
  viciados: []
}

}


componentDidMount() {
this.getViciados();
}

 getViciados = _ => {
fetch("http://localhost:3000/dependentes")
  .then(response => response.json())
  .then(response => {
    this.setState({ viciados: response.data })
    //console.log(response.data);
  })
  .catch(err => console.log(err));
}



render() {


 const viciados = this.state.viciados.map(viciado => {
  console.log(viciado['id_viciados'], viciado["nome_viciado"]);
  <div key={viciado['id_viciados']}>{viciado["nome_viciado"]}</div>
});
return (
  <div className="App">
    {viciados}
  </div>
);
}
}

export default App;

Muhammad Zeeshan · Accepted Answer · 2020-02-12 18:33:08Z

1

You need to return data from map:

const viciados = this.state.viciados.map(viciado => {
  return <div key={viciado['id_viciados']}>{viciado["nome_viciado"]}</div>
});

answered Feb 12, 2020 at 18:33

Muhammad Zeeshan

4,7784 gold badges19 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

Data is showing in console but not in screen - reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related