Question 73074 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to populate array of components using typescript and react – Reactjs

I am creating a bunch of CarBlock items by using map. I want to populate these items in an array using state. This is how i am doing it

import React, { useEffect, useState } from "react";
import CarBlock from "../carBlock/carBlock";

export interface CarDataProps {
    carData: Car[];
};


// Export this type of reused interface to somewhere else maybe to import it wherever needed 
export interface Car {
    id: string,
    modelName: string,
    bodyType: string,
    modelType: string,
    imageUrl: string
}

export default function CarList(props: CarDataProps) {
    const [carBlockList, setCarBlockList] = useState<Car[]>([]);

    const carsJSONData = props.carData;

    function createCarBlocks(){
        const carBlockItems = carsJSONData.map((car) => {
            // useEffect(() => setCarBlockList(carsJSONData),[])
            // console.log(carBlockList)
             return <CarBlock  carBlockItem={car} key={car.id}/>
        })

        return carBlockItems;

    };

    return (
        <div className="car-list">
            {createCarBlocks()}
        </div>
    );
};

I am receiving an error saying: Argument of type ‘(carBlockList: never[]) => Car[]’ is not assignable to parameter of type ‘SetStateAction<never[]>’.

I think that i need to type is somehow but i am struggeling to understand how i can accomplish this. Is it possible to type an array to have the type of React Components?

Tags:

2

Answers


  1. 0

    Inorder to typefix useState you can follow this.

    export default function CarList(props: CarDataProps) {    
const [carBlockList, setCarBlockList] = useState<JSX.Element[]>([]);
   
useEffect(()=>{
    const carJsxList = props.carData.map((car) => <CarBlock  carBlockItem={car} key={car.id}/>);
},[])

 return <div>{carBlockList}</div>;
}

    This should solve it;

    Other than that, Any reason you are calling the function in render part ? Judging by your use-case I dont see any need for it.

    Would suggest you to learn more about

    1. useEffect
    2. useState

    As these can be termed as basic prerequisites of React and learning this would help you in the longer run.

    Login or Signup to reply.
  2. 0

    if I understand you just want to pass use the data in carData to render some elements, so basically you map over the data and render CarBlocks, I think you got that working well. So in the most basic form you would have.

    export default function CarList(props: CarDataProps) {
    return (
        <div className="car-list">
            {props.carData.map((car)=><CarBlock carBlockItem={car} key={car.id} />)}
        </div>
    );
};

    And that works just fine. From what I understand, I think you said in the chat, you want to store some rendered element as state which is technically possible but there’s really no point in doing that, you should handle data in state and use components to render that data. Any optimization eventually can be done on the components themselves with things like useMemo` etc.. but that’s all extra for when you need.

    Either way for completeness you could do what you’re saying but you shouldn’t haha. Something like this maybe..

    function CarList(props: CarDataProps) {
  const [carBlockList, setCarBlockList] = useState<ReactNode>([]);

  useEffect(
    () =>
      setCarBlockList(
        props.carData.map((car) => <CarBlock carBlockItem={car} />)
      ),
    [props.carData]
  );

  return <div className="car-list">{carBlockList}</div>;
}

    Hooks like useEffect need to be called in specific ways, can see https://legacy.reactjs.org/docs/hooks-rules.html

    So to summarize, in react you have data and components pretty much. Elements are produced by components when they are given some props, the data. Generally unless you have very specific case you should just handle the data and components and let react produce the elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search