React-Native render json from fetch

Question

I have a fetch returning on ComponentDidMount(). Trying to get the response to render on the page.

I have set the state as follows:

this.state = {
  loading: true,
  file: null,
  video: null,
  marks: []
};

and my fetch:

componentDidMount() {
return fetch('http://10.0.2.2:8080/marks/createMark')
  .then(response => response.json())
  .then((data) => {
    this.setState({
      loading: false,
      marks: data.mark
    }, () => {
      console.log(data.mark);
      console.log(this.state.marks);
      // const dataMap = data.mark.map((item) => {
      //   return {
      //     key: item.id,
      //     label: item.mark
      //   };
      // });
    });
  })
  .catch(err => console.log(err));

}

Now my render inside of the return:

 const { marks } = this.state;

      <FlatList
        data={marks}
        renderItem={({ item }) => <Text>{item.mark}</Text>}
        keyExtractor={(item, index) => index}
      />

Do I have to map the data then try to render it??

OUTPUT OF console.log(this.state.marks):

{ _id: '5b61e47a55a0000aa980fab1', mark: 'ItHe', __v: 0 }

The mark is a pseudorandom string that can contain letters and numbers created on the backend

Can u please share the output of console.log((this.state.marks). — Mohammed Ashfaq
– Mohammed Ashfaq, Commented Aug 1, 2018 at 16:43

Mohammed Ashfaq · Accepted Answer · 2018-08-01 17:08:05Z

1

As this.state.marks is an object. First, you need to convert it to this form [{}]. You can do the following changes to make it work.

fetch('http://10.0.2.2:8080/marks/createMark')
.then(response => response.json())
.then((data) => {

  let marks = [data.mark];  //Add this line

  this.setState({
    loading: false,
    marks: marks    // Change this line
  }, () => {  
       ....
 Rest of your code

answered Aug 1, 2018 at 17:08

Mohammed Ashfaq

3,4262 gold badges19 silver badges24 bronze badges

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

2 Comments

James Brett Over a year ago

Thank you Mohammed. I really appreciate your help. This is the correct answer but I cannot up-vote because of my low reputation.

Mohammed Ashfaq Over a year ago

It's my pleasure. :-)

chandlervdw · Accepted Answer · 2018-08-01 16:44:44Z

0

marks is an array but you're not sharing what each object in the array looks like. If it's an array of strings, you're good but if it's an object, you'll need to destructure it and pull out the string you're looking to render.

<Text>{item.mark.someKeyWhoseValueIsAString}</Text

answered Aug 1, 2018 at 16:44

chandlervdw

3,2464 gold badges21 silver badges21 bronze badges

Collectives™ on Stack Overflow

React-Native render json from fetch

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related