I can't render my data from the DB with a .map

Question

I'm currently working on a react native app, and I have an issue about render information (in an array) that I fetch from my DB. To do that I have to write a .map.

I receive the data from the fetch in the console.log.

When I call my function with this "()".

<Text>Choisissez votre Choix Club </Text>
        <TouchableOpacity>
          <View>
            <Text>{this.renderMesClubs()}</Text>
          </View>
        </TouchableOpacity>

An error message appear

TypeError: undefined is not an object (evaluating '_this.state.sport.club.map')

Below you can find the all code page.

class ChoixClub extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sport: {club: []},
    };
  }

  getMesClubs = () => {
    const headers = new Headers({'Content-type': 'application/json'});
    const options = {
      method: 'GET',
      headers: headers,
    };

    fetch('http://localhost:8080/inscription/sport', options)
      .then((response) => {
        return response.json();
      })
      .then(
        (data) => {
          const club = JSON.stringify(data);
          this.setState({sport: club});
          console.log(this.state.sport.club);
        },

        (err) => {
          console.log(err);
        },
      );
  };

  renderMesClubs = () => {
    return this.state.sport.club.map((element) => {
      return (
        (
          <View className="articles">
            <Text>{element.nomClub}</Text>
          </View>
        ),
        console.log(element.nomClub)
      );
    });
  };
  componentDidMount() {
    this.getMesClubs();
  }

  render() {
    return (
      <SafeAreaView>
        <Text>Choisissez votre Choix Club </Text>
        <TouchableOpacity>
          <View>
            <Text>{this.renderMesClubs()}</Text>
          </View>
        </TouchableOpacity>

        <Text>Choisissez votre rival</Text>
        <TouchableOpacity></TouchableOpacity>
      </SafeAreaView>
    );
  }
}

export default ChoixClub;

I hope my message is clear enough for you to solve it, and thanks in advance for your answer!

Answer 1

You are calling JSON.stringify(data), which turns "data" into a string. assuming that the server is returning valid JSON, then calling response.json(), which you are already doing, should give you a Javascript object, hopefully an array, you should map over that, not turn it back into a string and map over the string.

to check if data really is an array you can use:

if(!Array.isArray(data)){ 
    throw new Error('expected the response to be an array');
}

Answer 2

All your data is actually contained by an array, so you need to specify the element or iterate it. As @user1852503 said, no JSON.stringify is needed because .then((response) => { return response.json(); }) does the trick

// Let's your data
let data = [ { "_id": "5f44dcc0a3da3a3008a71e5d", "sport": { "_id": "5f44dcc0a3da3a3008a71e5e", "club": [ { "_id": "5f44dcc0a3da3a3008a71e5f", "nomClub": "String", "classement": "String", "dateMatch": "String", "classementDB": "String" } ] }, "__v": 0 } ];



data[0].sport.club.map(element => {
// I just console log it to see if it works
console.log(element.nomClub)
})