skip to Main Content

I have a problem during pass the data between two components.

const [ideas, setIdeas] = useState([])

useEffect(() => {
    getIdeas();
  }, []);

  const getIdeas = async () => {
    try {
      const res = await axios.get(import.meta.env.VITE_APP_API_URL + `/api/v1/ideas`, { headers })
      setIdeas(res.data.data);
    } catch (e) {
      console.error(e)
    }
  }

After that in my rendering I create a control like this:

{ideas.length > 0 ? (
          <>
            {console.log(ideas)}
            <BasicTable data={ideas} />
          </>
        ) : (
          <div>Loading</div>
        )}

I can See the ideas values in my console.

Inside BasicTable Component I have something like this:

  export const BasicTable = ({ideas }) => {
     const columns = useMemo(() => COLUMNS, [])
     const data = useMemo(() => ideas, [])

     console.log(ideas)
     ...

my ideas is always undefined

2

Answers


  1. Your prop is not called ideas, it’s called data

    Login or Signup to reply.
  2. Pass your ideas as prop rather data something like this in BasicTable comp.

    <BasicTable ideas={ideas} />
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search