React - fetched data isn't displayed

Question

could anyone tell me why is that won't work? Proper data is displaying in the console (console.log(this.state);), but it won't be transfered to MainContainer.

Same data initialized in the constructor>state>users working without issues. Where's the problem?

App

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Header from './components/header/Header';
import MainContainer from './containers/main-container/MainContainer';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      users: []
    }
  }


  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(users => {
        let u = users.map((user) => {
         return {id: user.id, name: user.name, email: user.email}
        })
        return u;
      })
      .then(u => {
        this.setState({users: u});
        console.log(this.state);
      });
  }


  render() {
    return (
      <div className="App">
        <Header/>
        <MainContainer users={this.state.users}/>
      </div>
    )
  }
}

export default App;

MainContainer

import React from 'react';
import ActionBar from '../../components/action-bar/ActionBar'
import ListHeader from '../../components/list-header/ListHeader'
import ListItem from '../../components/list-item/ListItem'
import ListItemPlaceholder from '../../components/list-item-placeholder/ListItemPlaceholder'

class MainContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      users : props.users
    }
  }

  render() {
    const list = this.state.users.map(
      (user) =>
       {
        const liStyle = {
          'background-color': user % 2 == 0 ? '#fbfcfc' : 'transparent',
        };
        return <ListItem key={user.id} style={liStyle} id={user.id} name={user.name} email={user.email}/>
      }
      );
    return (
      <div className={'main-container'}>
        <ActionBar />
        <ListHeader />
        {list}
      </div>
    )
  }

}

export default MainContainer;

.................................................................................................................

Best Regards! crova

Data retrieval should be done in componentWillMount rather than componentDidMount, though that shouldn't be the problem. What does your MainContainer look like? Is the data only not displayed (might hint at an update problem) or is it not at all present in the props of the MainContainer? If you haven't, I'd recommend using React Dev Tools for easy debugging of state and props (so you won't need to put console logs everywhere). — GrafWampula
– GrafWampula, Commented Apr 11, 2018 at 22:58
componentWillMount doesn't solve the problem. I'll add MainContainer listing within a minute — Crova
– Crova, Commented Apr 11, 2018 at 23:02
@GrafWampula Actually componentDidMount() is the place to fetch data as also suggested by the react docs. componentWillMount() is prefixed with UNSAFE_ beginning with react 16.3 and will likely be completely removed in future react versions due to frequent use in an unintended way. — trixn
– trixn, Commented Apr 11, 2018 at 23:03

trixn · Accepted Answer · 2018-04-11 23:34:53Z

In your <MainContainer> component you store the users in its state in the constructor but you never alter it. You only need to use state when the component needs to alter it during its lifetime. But the users come from it's parent via the users prop which you never render. So just render that prop instead:

const MainContainer = props => (
    <div className="main-container">
          <ActionBar />
          <ListHeader />
          {props.users.map(({id, name, email}) => (
              <ListItem 
                  key={id} 
                  style={{
                    backgroundColor: id % 2 === 0 ? '#fbfcfc' : 'transparent'
                  }} 
                  id={id} 
                  name={name} 
                  email={email}
              />
          ))}
    </div>  
);

When the users change in the parent it will re-render and pass the new users array to the <MainContainer>.

Also note that if your component only renders props and has no own state it can be written as a stateless functional component.

Collectives™ on Stack Overflow

React - fetched data isn't displayed

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