using map won't render any JSX content react

Issue

I have the an issue where I am trying to generate dynamic checkbox elements from a list of data and there are no checkboxes appearing on the screen, yet there are no errors visible in the console. I am following the pattern I used in a different component to render jsx so I must have a typo but I'm stumped.

Main component SearchPage.js:

  const renderSettingsView = (data) => {
    if (settingsViewVisible) {
      return (
        <SettingsView data={data} />
      )
    } else {
      return null;
    }
  }

  const toggleSettingsView = () => {
    setSettingsViewVisible(!settingsViewVisible);
  }

  const toggleMainInfo = (e) => {
    // setShowMainInfo(!showMainInfo);
    setShowMainInfo(e.target.checked, () => {
      alert(showMainInfo)
    })
  }

  const SETTINGS_DATA = [
    {
      label: 'Main info',
      id: 'main_info',
      callback: toggleMainInfo
    }
  ]


  return (
    <div className="ui container" style={{marginTop: '10px'}}>
      <SearchBar term={term} onTermUpdate={onTermUpdate} />
      {renderRecentSearches()}
      <br/><br/>
      <button onClick={toggleSettingsView}>Settings</button>
      {renderSettingsView(SETTINGS_DATA)}
      <div className="ui segment">
        {renderMainContent()}
      </div>
    </div>
  )

both attempts including the commented out one do not show any checkboxes on screen SettingsView.js:

import React from 'react';

import SettingsCheckbox from './SettingsCheckbox';



const SettingsView = ({data}) => {

  // const renderCheckboxes = () => {
  //   return data.map((checkbox_info) => {
  //     <SettingsCheckbox id="main_info" label="Main info" callback={checkbox_info.callback}/>
  //   });
  // }

  const checkboxes = data.map((checkbox_info) => {
      <SettingsCheckbox id="main_info" label="Main info" callback={checkbox_info.callback}/>
    });

  return (
    <div className="ui segment">
    settings
      {checkboxes}
    </div>
  );
}


export default SettingsView;

SettingsCheckbox.js:

import React from 'react';


const SettingsCheckbox = ({id, label, callback}) => {

  return (
    <div style={{width: '200px'}}>
      <input
        type="checkbox"
        id={id}
        name={id}
        value={id}
        onChange={callback()}  />
      <label for="main_info">{label}</label><br/>
    </div>
  );
}


export default SettingsCheckbox;

How do I map over the data list of objects and render checkboxes based on the data?

Solution

I have tried your code snippet of SettingsView.js and there's a little problem I found. You need to do an implicit return like below.

Try using this code,

const checkboxes = data.map((checkbox_info) => (
    <SettingsCheckbox id="main_info" label="Main info" 
    callback= {checkbox_info.callback}/>
));
    
return (
    <div className="ui segment">
        settings
        {checkboxes}
    </div>
);

Notice that I've changed the data.map((checkbox_info) => {<SettingsCheckbox />}) to data.map((checkbox_info) => (<SettingsCheckbox />)) and using () instead of {}

But if you prefer the explicit way, try using the return statement like bellow.

const checkboxes = data.map((checkbox_info) => {
    return (
        <SettingsCheckbox id="main_info" label="Main info" 
        callback= {checkbox_info.callback}/>
    )
});

return (
    <div className="ui segment">
        settings
        {checkboxes}
    </div>
);

Both way works just fine...

Answered By - Aushraful