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

How can I pass data from custom hook to component? – Reactjs

I have custom hook which pass parameter data with fetched data to component Settings. There I have hook setData11 in useEffect and I want to set in that hook data passed from useTable but I get error

Argument of type ‘Data | Column[] | undefined’ is not assignable to parameter of type ‘SetStateAction<DataTable[] | undefined>’.
Type ‘Data’ is not assignable to type ‘SetStateAction<DataTable[] | undefined>’.
Type ‘Data’ is missing the following properties from type ‘DataTable[]’: length, pop, push, concat, and 29 more.ts(2345)

interface DataTable {
  [id: string | number]: string | number;
}

interface Data {
  [category: string]: DataTable[];
}



const urls: string[] = [
  "https://jsonplaceholder.typicode.com/posts",
  "https://jsonplaceholder.typicode.com/comments",
  "https://jsonplaceholder.typicode.com/albums",
  "https://jsonplaceholder.typicode.com/photos",
  "https://jsonplaceholder.typicode.com/todos",
];

const useTable = (idurl: number, actualcategory: string) => {
  const [data, setData] = useState<Data>();

  const [columns, setColumns] = useState<Column[]>();
  const loadDatabase = () => {
    fetch(urls[idurl])
      .then((response) => response.json())
      .then((response) => {
        setData({
          ...data,
          new: response.filter((t: DataTable[], i: number) => {
            return i > 50 && i < 100 && t;
          }),

          removed: response.filter((t: DataTable[], i: number) => {
            return i > 100 && i < 150 && t;
          }),

          postponed: response.filter((t: DataTable[], i: number) => {
            return i > 50 && i < 100 && t;
          }),
        });

        const objcolumn: Column[] = Object.keys(response[0]).map(
          (t: string) => {
            let d: Column = { col: { title: t, disp: true } };
            return d;
          }
        );
        setColumns(objcolumn);
      });
  };
  useEffect(() => {
    loadDatabase();
    alert(JSON.stringify(data));
  }, []);
  return [data, columns];
};

export { useTable };






const Settings = () => { 
  const [data, columns, checkall, changeDatabase] = useTable(1, "new");  


const[ data1, setData1]=useState<DataTable[]>()
  useEffect(() => {
    setData1(data) 
  }, []);
 
return <></>
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thanks for answer :)

    here is resolution of the problem

    https://fettblog.eu/typescript-react-typeing-custom-hooks/


  2. 0

    It’s not clear to me what this code is supposed to do, so it’s difficult to give you a specific answer.

    Your example contains several mistakes.

    The first one can be confusing. When you return an array from your custom hook, its type will be inferred as Array<Data | Column[]>. If you want to get a signature similar to useState, you should use as const to tell TypeScript that this array contains a specific number of elements in a specific order and cannot change.

    But even after you specify as const, TypeScript will complain about two things:

    1. The number of elements that you are trying to unpack from useTable should correspond to the two that you are returning (possibly just a typo). So it’s should be const [data, columns] = useTable(...)
    2. The type Data | undefined and DataTable[] | undefined are incompatible, which is entirely true. I’m not entirely sure what your end goal is. If you want to use a specific category as the data1 state, you should pass some attribute of data
    const useTable = (idurl: number, actualcategory: string) => {
  ...
  return [data, columns] as const; // use "as const"
};

// --------------

const Settings = () => { 
  // Remove extra parameters
  const [data, columns] = useTable(1, "new");  


  const [data1, setData1] = useState<DataTable[]>()

  useEffect(() => {
    // data also can be undefined, so you need to use ?. syntax
    setData1(data?.SOME_CATEGORY) 
  }, []);
 
  return <></>
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search