Object.keys(obj) return is not displaying to screen

Question

I have the following code snippet that works fine in the console, but it's not displaying to the screen. Any help is appreciated.

{Object.keys(flags).forEach(product => {
    return (
        <>
            <input
                type='checkbox'
                className='form-checkbox'
                name={product}
                value={product}
                onChange={this.gatherFormData}
            />
            <span className='label'>{product}</span>
        </>
    );
})}

The product key is not displaying on the screen, even though I can see it just fine within the console.

Answer 1

Should it not be:

return (
    <div> // needs an element wrapper
        <input
            type='checkbox'
            className='form-checkbox'
            name={product}
            value={product}
            onChange={this.gatherFormData}
        />
        <span className='label'>{product}</span>
    </div>
);

As jonrsharpe says - you also need to use map (forEach simply iterates over the values - but doesn't return anything)

{Object.keys(flags).map(product => {

Answer 2

Return inside .forEach does nothing either push data to an array to use it later or return from a .map method instead

Here is an example if you need to use .forEach as in your question...

{
const products = [];
Object.keys(flags).forEach(product => {
  products.push (
    <>
        <input
            type='checkbox'
            className='form-checkbox'
            name={product}
            value={product}
            onChange={this.gatherFormData}
        />
        <span className='label'>{product}</span>
    </>
  );
})
return products;
}