0

I have this component that is called in my main file, this component displays all the data, the data returns an array

    import React, { Component } from 'react';
    import {
        IonRow,
        IonCol
    } from '@ionic/react';
    
    import data from '../data/data.json';
    
    const BookList: React.FC = () => {
        
        return(
            data.data.map((context) => {
            <IonRow>
                <IonCol size="9">
                    <p>{context.name}</p>
                </IonCol>
                <IonCol size="3">
                    <p>{context.payload}</p>
                </IonCol>
            </IonRow>
            })
        );
        
    };
    
    export default BookList;

And the error is like:

error

somewhere in declaring booklist. Im new to react so its kinda bit hard to understand what the main problem is, I tried to search for any solutions but cant find definite and clear solution that I understand.

isAif
  • 2,126
  • 5
  • 22
  • 34
nyx97
  • 179
  • 1
  • 13
  • Try removing { } from map – Harmandeep Singh Kalsi Jun 21 '20 at 15:30
  • @HarmandeepSinghKalsi when I tried to remove it, error something like this Type '() => JSX.Element[]' is not assignable to type 'FC<{}>'. Type 'Element[]' is missing the following properties from type 'ReactElement': type, props, key – nyx97 Jun 21 '20 at 15:36

1 Answers1

2

Your code was returning an array of elements, see this Type '() => JSX.Element[]' is not assignable to type 'FC<{}>', all you need is to return a single element using <div> or react fragment i.e. <> </>

Try this:

const BookList: React.FC = () => (       
  <>
    {data.data.map(({ name, payload }) => (
      <IonRow>
           <IonCol size="9">
               <p>{name}</p>
           </IonCol>
           <IonCol size="3">
               <p>{payload}</p>
           </IonCol>
       </IonRow>
    ))}
  </>
);
isAif
  • 2,126
  • 5
  • 22
  • 34
  • After applying the answer, error show something like this Type '() => JSX.Element[]' is not assignable to type 'FC<{}>'. Type 'Element[]' is missing the following properties from type 'ReactElement': type, props, key – nyx97 Jun 21 '20 at 15:58
  • try wrapping the return value in react fragment, check the updated answer – isAif Jun 21 '20 at 16:00
  • does creating component is correct @heisaif? the error appears on the declaration of function component – nyx97 Jun 21 '20 at 16:25
  • If you can create an example in stackblitz I can take a look. – isAif Jun 21 '20 at 16:28
  • Im currently creating stackblitz, still waiting to finish installing dependencies – nyx97 Jun 21 '20 at 16:42
  • It solves the problem, can you mind to share what the cause of that problem? – nyx97 Jun 21 '20 at 16:44
  • Your code was returning an array of elements, see this `Type '() => JSX.Element[]' is not assignable to type 'FC<{}>'`, all you need is to return a single element using `
    ` or react fragment i.e. `<> >`.
     – isAif Jun 21 '20 at 16:52
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/216382/discussion-between-nyx97-and-heisaif). – nyx97 Jun 21 '20 at 16:53