This code block is OK:
let attributes = <>
{
props.filter.attributes?.map((data) => {
return
<div className="form-check">
<input className="form-check-input" type="radio" id={data.id.toString()} name={props.filter.name} value={data.name} onChange={props.changeHandler} />
<label className="form-check-label">{data.name}</label>
</div>
})
}
</>
But this code has the error Type 'void[]' is not assignable to type 'ReactNode'.
The only change is to wrap the map
function in a div:
let attributes = <>
<div className="row row-cols-5">
{
props.filter.attributes?.map((data) => {
return
<div className="form-check">
<input className="form-check-input" type="radio" id={data.id.toString()} name={props.filter.name} value={data.name} onChange={props.changeHandler} />
<label className="form-check-label">{data.name}</label>
</div>
})
}
</div>
</>
What do I need to do to the second example to eliminate the error?
>Solution :
I think your return should looks as follows
return (
<div className="form-check">
<input className="form-check-input" type="radio" id={data.id.toString()} name={props.filter.name} value={data.name} onChange={props.changeHandler} />
<label className="form-check-label">{data.name}</label>
</div>
);
So the HTML should be wrapped into brackets. Otherwise, you actually have it as unreachable code and your function looks like simple
return;
// Some unreachable html here