How to pass function as many prop in react typescript (useState([]), useState(boolean))-CodePudding

API Structure

{
"default": [
    {
      "id": 1,
      "name": "A"
    },
    {
      "id": 2,
      "name": "B"
    },
    {
      "id": 3,
      "name": "C"
    },
  ]
}

i want to handling many props in child component,,, :(

many props example is useState([]), useState(boolean)

export interface iItemListProps {
  id: number;
  name: string;
}

export interface iDepth {
  depth: boolean;
}

function App() {
  const [itemList, setItemList] = useState([]);
  const [depth, setDepth] = useState(false);
  useEffect(() => {
    fetch("API URL")
      .then((res) => res.json())
      .then((res) => {
        setItemList(res);
      });
  }, []);

  return (
    <div className="wrap">
      <ul className="tabList">
        <li className="active">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <div className="listContainer">
        <Product itemList={itemList} {...depth} />
      </div>
    </div>
  );
}

component itemList error is

Type 'never[]' is not assignable to type '[{ id: number; name: string; }]'. Target requires 1 element(s) but source may have fewer.

App.tsx

type iItemListProps = {
  itemList: [
    {
      id: number;
      name: string;
    }
  ];
  depth: boolean;
};

const Product: React.FunctionComponent<iItemListProps> = ({
  depth,
  itemList,
}) => {
  console.log(depth);
  return (
    <div className="weekly">
      <p className="title">이번주 채소</p>
      {itemList.map((item) => (
        <span key={item.id} className="item">
          {item.name}
        </span>
      ))}

      <Allergy />
    </div>
  );
};

Please tell me if there is a good way.....

CodePudding user response：

The problem lies here: const [itemList, setItemList] = useState([]); here you are initialising your state with an empty array and not with your itemList type which is an array of object..

Do this:

const [itemList, setItemList] = useState([{id: 0; name: '';}]);

const [itemList, setItemList] = useState([{}]);

Also, with no value in your state and using it with map may cause problem like this.

In your App.tsx use && condition so that it will execute only when you have data in your itemList.

{itemList && itemList.map((item) => (
        <span key={item.id} className="item">
          {item.name}
        </span>
  ))}

CodePudding user response：

You need to specify what type useState handles, for example:

useState<IItemListProps>([]);
/**
IItemListProps = {
  id: number;
  name: string;
}[]
 */

You can do it because of useState signature

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

Error happens because [] type by default inferred as never[]

CodePudding user response：

You have to mention the type in useState. For example:

const [itemList, setItemList] = useState<iItemListProps[]>([]);

Or have to give initial state in the useState. For example:

const [itemList, setItemList] = useState([{}]);
Or
const [itemList, setItemList] = useState([{id: 0, name: 'name'}]);

Hope problem is solved :)