So I'm trying to pass props from an array to render on screen with the checkbox list. Instead, my function passes objects and not props. I was able to pass one prop but not the others. I was following an example that did a newsfeed but the articles were objects. (using snack.expo)
How can I pass props instead of objects?
code: array: let tasks = [ { title: 'My first completed task', checked: true, }, { title: 'My second task', checked: false, }, { title: 'My third task', checked: false, }, ];
function: renderCheckBox(){ let checkbox = [ ];
for(let i = 0; i < tasks.length; i++){
let t = tasks[i]
checkbox.push( <Checkbox onToggleChange={t}/>);
}
return checkbox;
}
View:
{this.renderCheckBox()}
</SafeAreaView>
I can get the check boxes to show but not the tasks.
Any help is greatly appreciated.
You should learn about JSX. And how to render in combination with the map() function. Here is answer for you:
const tasks = [ { title: 'My first completed task', checked: true, }, { title: 'My second task', checked: false, }, { title: 'My third task', checked: false, }, ];
<SafeAreaView>
{tasks.map((item: any) => <Checkbox onToggleChange={t} title={item.title} checked={item.checked}/>}
</SafeAreaView>