react redux render data undefined

Question

I am very new to React-redux applications development so I am trying to code simple worldcup app. Simply my code are;

class Teams extends Component {
  componentDidMount() {
    this.props.onRequestData();
  }

  renderTeams() {
    const { team } = this.props;
    console.log(team);
            _.map(team, teamList =>
              <Grid.Column
                mobile={4}
                tablet={8}
                computer={8}
                key={teamList.id} >
                <Card >
                  <Image src={teamList.flag} />
                  <Card.Content>
                    <Card.Header>Nationality</Card.Header>
                    <Card.Description key={teamList.id}> {teamList.name} </Card.Description>
                  </Card.Content>
                </Card>
              </Grid.Column>
          );

  }
  render() {
    return (
      <Container>
        <Grid>
          {this.renderTeams()}
        </Grid>
      </Container>);
  }
}

const mapStateToProps = (state) => {
console.log("mapPropState", state);
  return {
    team: state.fetchData.teams

  };
};
const mapDispatchToProps = dispatch => ({
  onRequestData: () => dispatch(fetchResults())
});

I can see I fetch the data(with console.log("mapPropState", state) but unfortunately I guess my render method undefined. So nothings work on page and no console error. So where did i do wrong? Thank You.

One of the biggest problem is, there is no console error... I just see white page. — Ryoush
– Ryoush, Commented Oct 6, 2018 at 21:36

Tyler · Accepted Answer · 2018-10-06 21:41:44Z

2

Your renderTeams function is not returning anything. From the looks of your code, I assume it should be returning _.map(...), correct?

answered Oct 6, 2018 at 21:41

Tyler

2,4002 gold badges13 silver badges10 bronze badges

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

Comments

Code-Apprentice · Accepted Answer · 2018-10-06 21:47:39Z

1

team is undefined when your component is first rendered. I assume that fetchResults() calls fetch() to make an HTTP request. This will eventually return the data and later you see that team has a value. You need to write your component in such a way that it checks if team is defined:

render() {
return (
  <Container>
    <Grid>
      {this.props.team && this.renderTeams()}
    </Grid>
  </Container>);

If you want to get fancy, you can render a spinning circle to indicate that data is loading until you have the data available.

Note:

The names team and teamList seem to be reversed since teamList seems to refer to a single team object in the array stored in team. I suggest you use teamList to refer to the entire array and team to refer to individual objects in the array when you map over it.

There is no need to do use _.map() because you can just do teamList.map(team => {/* ... */});. Also, you need to return the result of mapping over the list:

return teamList.map(team => {
    // ...
});

answered Oct 6, 2018 at 21:47

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

2 Comments

Ryoush Over a year ago

Simply "team &&" control works and i'll keep that in my mind what you said. Thank you so much.

Code-Apprentice Over a year ago

@Ryoush This is a common technique called "conditional rendering". It checks if the first value is "truthy" (often meaning that it is defined) before attempting to render.

Collectives™ on Stack Overflow

react redux render data undefined

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related