I’ve been trying to pass the existing data from child component to parent component, but none of the data showed up. The data already showing up if I directly accessing child route
here is my code
<code>export default function Children({ posts }) {
return (
<>
<h1>My Super Blog</h1>
<hr/>
{ posts && posts.map( (item) => (
<div key={item.id}>
<h2 className="">{item.title}</h2>
<p>{item.body}</p>
</div>
)) }
</>
);
}
</code>
<code>export default function Children({ posts }) {
return (
<>
<h1>My Super Blog</h1>
<hr/>
{ posts && posts.map( (item) => (
<div key={item.id}>
<h2 className="">{item.title}</h2>
<p>{item.body}</p>
</div>
)) }
</>
);
}
</code>
export default function Children({ posts }) {
return (
<>
<h1>My Super Blog</h1>
<hr/>
{ posts && posts.map( (item) => (
<div key={item.id}>
<h2 className="">{item.title}</h2>
<p>{item.body}</p>
</div>
)) }
</>
);
}
<code>import { Link, Head, usePage } from '@inertiajs/react';
import Children from './Index';
import { useState } from 'react';
export default function Parent({ auth, laravelVersion, phpVersion }) {
const { posts } = usePage().props;
return (
<>
<Head title="Welcome" />
<div>
<div>
<Children posts={posts} />
</div>
</div>
</>
);
}
</code>
<code>import { Link, Head, usePage } from '@inertiajs/react';
import Children from './Index';
import { useState } from 'react';
export default function Parent({ auth, laravelVersion, phpVersion }) {
const { posts } = usePage().props;
return (
<>
<Head title="Welcome" />
<div>
<div>
<Children posts={posts} />
</div>
</div>
</>
);
}
</code>
import { Link, Head, usePage } from '@inertiajs/react';
import Children from './Index';
import { useState } from 'react';
export default function Parent({ auth, laravelVersion, phpVersion }) {
const { posts } = usePage().props;
return (
<>
<Head title="Welcome" />
<div>
<div>
<Children posts={posts} />
</div>
</div>
</>
);
}
any help be appreciated, thank you.
New contributor
Rainaldy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
figured out, i ended up using axios to fetch the data
<code> useEffect(() => {
axios.get('/api/post') // Replace with your backend endpoint
.then(response => {
setPosts(response.data);
chooseData(response.data); // Send data to parent component
});
}, [chooseData]);
</code>
<code> useEffect(() => {
axios.get('/api/post') // Replace with your backend endpoint
.then(response => {
setPosts(response.data);
chooseData(response.data); // Send data to parent component
});
}, [chooseData]);
</code>
useEffect(() => {
axios.get('/api/post') // Replace with your backend endpoint
.then(response => {
setPosts(response.data);
chooseData(response.data); // Send data to parent component
});
}, [chooseData]);
New contributor
Rainaldy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.