SolidJS Parent keeps passing null into child.
// app.js
import { html, createSignal } from "../solid-web/solid-web.js";
import ChildComponent from './ChildComponent.js';
export default function App() {
const [postData, setPostData] = createSignal(null);
// Function to perform API call
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
// Update the post data
setPostData(data);
} catch (error) {
console.error('Error fetching data:', error);
}
};
return html
<div>
<h1>Parent Component</h1>
<button type="button" onclick=${fetchData}>Fetch Data from API</button>
${ChildComponent({ postData: postData() })}
</div>
;
}
the value of postData() is always null, despite https://jsonplaceholder.typicode.com/posts/1 being a working api i can visit publicly. Can someone help me or show me an example of fetching api and passing the data to a child?3 Replies
I think w html you will probably have to do
ChildComponent({ get postData(){ return postData() })@bigmistqke can you give me a code example ?😠literally the most minimal example would help me out
(you can format code in discord with
``tsx )
solid's compilation steps sets props that are functions to getters (that's why you should not destructure your props in solid) but bc with the html` tag template literal there is no compilation you will have to set those getters yourself.