I want to use the map function with the checkbox. I have written this code but it is giving error. how to do that
<div>
<form>
{
data.map((x)=>{
<input type="checkbox" />{x.name}
})
}
</form>
</div>
Add a comment
|
5 Answers
You need to return from the map callback
<div>
<form>
{
data.map((x) => {
return <input type="checkbox" />{x.name}
})
}
</form>
</div>
and you could also add a label around the input and text, so that the user can also click on the text to highlight the relevant checkbox
<div>
<form>
{
data.map((x) => {
return <label><input type="checkbox" />{x.name}</label>
})
}
</form>
</div>
answered Apr 20, 2022 at 18:54
Gabriele Petrioli
197k35 gold badges275 silver badges331 bronze badges
Comments
When using arrow functions in JavaScript, you can return either explicitly or implicitly.
Explicitly
<div>
<form>
{
data.map(x => {return <input type="checkbox" />{x.name}})
}
</form>
</div>
Implicitly
<div>
<form>
{
data.map(x => <input type="checkbox" />{x.name})
}
</form>
</div>
Doing the following will cause data.map(x => {<input type="checkbox" />{x.name}}) to be an array of undefined instead of an array of inputs.
<div>
<form>
{
data.map(x => {<input type="checkbox" />{x.name}})
}
</form>
</div>
answered Apr 20, 2022 at 18:57
Raphael Rafatpanah
20.2k28 gold badges106 silver badges176 bronze badges
Comments
You should change curly braces with parentheses
<div>
<form>
{
data.map((x)=>(
<input type="checkbox" />{x.name}
)
}
</form>
</div>
Comments
Now that you've been helped with the checkbox syntax, I would suggest using keys when using map.
If you do not have a unique value for each item, add an index parameter in the callback function.
import React from "react";
import "./style.css";
export default function App() {
const list = [1,2,3,4,5];
return (
<div>
<ol>
{list.map((item, index) =>
<li key={index}> {item} </li>
)}
</ol>
</div>
);
}
Comments
You should use return keyword or implicitly return
<div>
<form>
{
data.map(x=> (
<input type="checkbox" />{x.name}
))
}
</form>
</div>
Comments
