Type 'void[]' is not assignable to type 'ReactNode'

May 8, 2023

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