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
Your prop is not called ideas, it’s called data
Pass your ideas as prop rather data something like this in BasicTable comp.