Getting this error - TypeError: Cannot read properties of null (reading '_isDirty')
Hi all!
I am trying to create a simple home page using lighting Solid JS something like a netflix page. (Images/Posters are rendered using and imagesArray that has the links to the images and rendering using For each loop.
I have another Row that will render another row of movie tiles by fetching the data from a url, and stored in an array. each element has the url of the movie poster.
in my main page inside the Row I have rendered a list which ultimately does this
* export default function IListItemRenderer(props) {
const [local, others] = splitProps(props, ["
console.log("local: ", local.items.getlist());
const list = local.items.getlist();
return (
<For each={list}>
{(item, i) => {
console.log("i: ", i());
console.log("item: ", item);
<View src = {item.geticon()} />
}}
</For>
);
} *
the props passed in and having each Item from the parent
So the issue is when I try to only console log the items in the For each loop inside * IListItemRenderer * it doesn't throw an error but when I try to add a View tag -> <View src = {item.geticonurl()} /> it gives the following error
* index.ts?v=bf2f0daf:310 Uncaught (in promise) TypeError: Cannot read properties of null (reading '_isDirty')
at ElementNode.render (index.ts?v=bf2f0daf:310:16)
at node.render (dom-inspector.ts?v=bf2f0daf:61:20)
at Object.fn (lightning.ts?v=bf2f0daf:9:46)
at runComputation (chunk-TXI7JWJQ.js?v=bf2f0daf:809:22)
at updateComputation (chunk-TXI7JWJQ.js?v=bf2f0daf:788:3)
at runTop (chunk-TXI7JWJQ.js?v=bf2f0daf:915:7)
at runUserEffects (chunk-TXI7JWJQ.js?v=bf2f0daf:1045:5)
at chunk-TXI7JWJQ.js?v=bf2f0daf:996:22
at runUpdates (chunk-TXI7JWJQ.js?v=bf2f0daf:936:17)
at completeUpdates (chunk-TXI7JWJQ.js?v=bf2f0daf:996:5) *
I know the query is quite long, but help is highly appreciated. I am a beginner please let me know if I need to explain it better! Thanks a lot in advance 🙂
4 Replies
a tip: u can format code with tsx
+ u are not returning the
View in the For-callback+ best way for us to help you is if you can make minimal reproductions. with https://playground.solidjs.com/ you can import external libraries (p.ex
import confetti from "confetti"). it won't import the types, but it will work.Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
Thanks for your response!
I found what the issue was, unfortunately it was a very small mistake from my side which I double checked in the solid demo app, I found this thing to be different, so it was
If I do it like this
using {} curly braces for iterating through items, it throws that error -- but if I do like this
use parentheses when iterating through the items, no more error and the images are rendered correctly
happy you figured it out. typescript can help w these type of bugs