Data is not rendering using Flatlist in react native

Question

I am fetching data from api and I am storing it in a state in a functional component if I am simply printing the data in a {data} it is showing all data in json format but it is not rendering using flatlist.

 
const PlantsBreedScreen = ({ navigation }) => {
const [data, setData] = useState([]);

useEffect(() => {
    fetchData();
}, []);

const fetchData = async() =>
{

    const request =  await axios.get('/obj/Category');
    setData(JSON.stringify(request.data.response.results));
    console.log(request.data.response.results);
    return request;
}

const Item = (props) => (
    <View style={styles.item}>
      <Text style={styles.title}>{props.title}</Text>
    </View>
  );
  
  const renderItem = ({ item }) => (
    <Item cName={item.cName} />
  );
  

return (
    <SafeAreaView style={styles.container}>
        <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item._id}
       /> 
    </SafeAreaView>
)
}
    
    
I am getting this data 

[
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211075844x987594468971699600/AirPlant.png",
        "cName":"AirPlant",
        "Created Date":"2020-06-12T03:50:32.293Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:58.122Z",
        "_id":"1591933832293x740470401637297400",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211065995x923166783941526000/Aquatic.png",
        "cName":"Aquatic",
        "Created Date":"2020-06-12T03:50:54.814Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:48.282Z",
        "_id":"1591933854814x594601779376298400",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211055775x815245486081858600/CacSucc.png",
        "cName":"CacSucc",
        "Created Date":"2020-06-12T03:51:08.824Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:37.763Z",
        "_id":"1591933868824x824580506688475900",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211046766x525372817880738000/Carnie.png",
        "cName":"Carnie",
        "Created Date":"2020-06-12T03:51:48.497Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:28.878Z",
        "_id":"1591933908497x739290661511488500",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211038814x188848007836712300/Flowery.png",
        "cName":"Flowery",
        "Created Date":"2020-06-12T03:52:02.800Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:20.613Z",
        "_id":"1591933922800x240413248643147620",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211030148x445996690624532700/Leafy.png",
        "cName":"Leafy",
        "Created Date":"2020-06-12T03:52:14.162Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:11.914Z",
        "_id":"1591933934162x408228620159180000",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211021175x413587314607428300/Exotic.png",
        "cName":"Exotic",
        "Created Date":"2020-06-12T03:52:25.027Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:03.554Z",
        "_id":"1591933945027x914059867656276400",
        "_type":"custom.category"
    }
]

But I am getting screen with only lines and css style is applied on it but no data is showing

Please help me how to solve this or any suggestion or alternative to do it Thanks in advance

Please refer this link. codesandbox.io/s/fast-wind-85sru

Magic Dev
– Magic Dev

2020-12-21 09:08:23 +00:00
Commented Dec 21, 2020 at 9:08 — Magic Dev
– Magic Dev, Commented Dec 21, 2020 at 9:08

Dharman · Accepted Answer · 2020-12-21 09:12:23Z

2

You passed the cName as title on Item component.

Please change the item component like below.

const Item = (props) => (
  <View style={styles.item}>
    <Text style={styles.title}>{props.title}</Text>
  </View>
);

edited Dec 21, 2020 at 9:12

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Dec 21, 2020 at 9:06

Magic Dev

3195 silver badges23 bronze badges

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

6 Comments

Leri Gogsadze Over a year ago

Then try to modify item component: <Item cName={item.cName} />.

Magic Dev Over a year ago

@LRajk, have you checked the link which I commented on your question? If you still can't see changes, please check you fetch data correctly.

HaryanviDeveloper Over a year ago

i have updated my code please check this is my complete code @MagicDev

Magic Dev Over a year ago

Try to remove JSON.stringify on setData.

HaryanviDeveloper Over a year ago

Still no change @MagicDev

|

HaryanviDeveloper · Accepted Answer · 2020-12-21 09:58:02Z

1

As you are passing title as a prop to Item in renderItem function, you have to receive that prop using the same prop name in Item function.

const Item = (props) => ( 
    <View style={styles.item}>
        <Text style={styles.title}>{props.cName}</Text>
    </View> 
); 
const renderItem = ({ item }) => ( <Item cName={item.cName} /> );

edited Dec 21, 2020 at 9:58

HaryanviDeveloper

1,1351 gold badge12 silver badges19 bronze badges

answered Dec 21, 2020 at 9:18

Mohammad ABS Jabed

3926 silver badges16 bronze badges

6 Comments

Mohammad ABS Jabed Over a year ago

can you please check this code... link this should work...

Mohammad ABS Jabed Over a year ago

on the basis of your latest updated code just change this line @LRajk <Text style={styles.title}>{props.cName}</Text>

HaryanviDeveloper Over a year ago

Thanks @Mohammad ABS Jabed this works for me really very helpfull

Mohammad ABS Jabed Over a year ago

you're welcome. It's all about passing a prop and receiving that prop with the same name,

HaryanviDeveloper Over a year ago

if you don't mind can you please help me in rendering the image also in the same post above @Mohammad

|

user14361391 · Accepted Answer · 2020-12-21 09:07:26Z

0

Here is a better way to handle network requests using React Hooks,

Try extracting your network request to a seperate function and call it inside useEffect.

const fetchData = async() =>
{
   
    const request =  await axios.get('https://randomuser.me/api/');
    setData(request.data);
    console.log(data);
    return request;
}



useEffect(() => {
   
  fetchData();
}, []);

answered Dec 21, 2020 at 9:07

user14361391

1 Comment

HaryanviDeveloper Over a year ago

Thanks @AppCity i considered it but there is not change

Collectives™ on Stack Overflow

Data is not rendering using Flatlist in react native

3 Answers 3

6 Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related