Error while passing an array to a component (React - TypeScript)

Question

Trying to describe inputs for Component 2 but receiving an error. Please advise how to pass and describe arrays input properly.

Model:

interface IIncident {
    id: string,
    title: string
}

Component 1:

interface IncidentManagerProps {
}

interface IncidentManagerState {
    incidents: IIncident[]
}

class IncidentManager extends Component<IncidentManagerProps, IncidentManagerState> {
    constructor(props: IncidentManagerProps) {
        super(props);
        this.state = {
            incidents: []
        }
    }

    render = () => {
        const {incidents} = this.state;

        return (
            <div className={'inc-cont'}>
                <p>All Incidents</p>
                <div className={'all-inc'}>

                    //Error displayed here
                    <Incidents incidents={incidents}/>
                </div>
            </div>
        );
    }
}

Component 2: incidents any type resolve the issue but that's is not a good way

interface Incidents {
    incidents: IIncident[]
}

const Incidents = (props: Incidents) => props.incidents.map((inc: IIncident) => (
   <Incident key={inc.id} title={inc.title}/>
));

Error message:

JSX element type 'Element[]' is not a constructor function for JSX elements.
  Type 'Element[]' is missing the following properties from type 'Element': type, props, key  TS2605

Vlad Glazov · Accepted Answer · 2019-10-13 09:30:07Z

2

render() cannot return elements array, just a single element. Try wrapping your 2nd component output to any element like this:

const Incidents = (props: {incidents: IIncident[]}) => <>
  {props.incidents.map(inc =>
    <Incident key={inc.id} title={inc.title}/>
  )}
</>;

answered Oct 13, 2019 at 9:30

Vlad Glazov

2592 silver badges6 bronze badges

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

1 Comment

cchEditor Over a year ago

I also was thinking about it but I wrapped a wrong one. Thank you for help.

Collectives™ on Stack Overflow

Error while passing an array to a component (React - TypeScript)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related