Question 277885 in Html Question posted in
Some basic documentation can be found here.

Html – iterate array using map and display state and checkbox

I am trying to lean react by solving a problem in react. Providing the react code challenge below.
I am trying to iterate the array and trying to print state and checkbox.

I googled but still no luck, not sure how to solve it. Providing my code below and stackblitz. Can you guys help me.

Type ‘void[]’ is not assignable to type ‘ReactNode’.

https://stackblitz.com/edit/stackblitz-starters-ngl4yu?description=React%20%20%20TypeScript%20starter%20project&file=src%2Fcomponents%2FstateDropdown.css,src%2Fcomponents%2FStateDropdown.tsx,src%2FApp.tsx,src%2Fcomponents%2FStates.tsx&title=React%20Starter

import { useState } from 'react';
import './stateDropdown.css';
import { states } from './States';
export function StateDropdown() {
  const [isDropDownDisplayed, setIsDropdowndisplayed] = useState(false);
  return (
    <fieldset className="state-dropdown">
      <button
        className=""
        onClick={() => setIsDropdowndisplayed((prevState) => !prevState)}
      >
        -- Select your states --
      </button>
      {isDropDownDisplayed && (
        <div className="panel">
          {states.map((state) => {
            <>
              <input type="checkbox" />
              <label>{state.name}</label>
            </>;
          })}
        </div>
      )}
    </fieldset>
  );
}

https://www.youtube.com/watch?v=V2zEAXLQbF4&t=794s

Tags:

2

Answers


  1. 0

    Your syntax is incorrect here, map should simply return your component like:

     {states.map((state) => (
   <>
     <input type="checkbox" />
     <label>{state.name}</label>
   </>
 ))}

    I would also recommended applying the necessary key property to your fragment to ensure that all children in a list have a unique identifier for re-rendering.

     {states.map((state) => (
   <React.Fragment key={state.name}>
     <input type="checkbox" />
     <label>{state.name}</label>
   </React.Fragment>
 ))}
    Login or Signup to reply.
  2. 0 
    let aFunction = ()=> <span>Hi</span>;

    Is a function that returns <span>Hi</span>;

    let aFunction = ()=>(<span>Hi</span>);

    is also a function that returns <span>Hi</span>;

    let aFunction = ()=>{
  return <span>Hi</span>;
}

    is also a function that returns <span>Hi</span>;

    let aFunction = ()=>{
 <span>Hi</span>;
}

    Is a function that returns NOTHING

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search