Issue with list and keys in React JS

January 26, 2022

Doing a course on React, and got confused with one of the problems that I have to solve. I have to finish up the code after {list && and before </ul> in such a way that I map the <li> so that it shows each tip. I confused myself with setting up the map function and in setting up the key properly.

import React, { useState, useEffect } from 'react';
import './Tips.css';

function Tips() {
  useEffect(() => {
    fetch('api').then((res) => {
      return res.json();
    }).then((res) => {
      setList(Object.values(res));  
    })
  }, []);
  const [list, setList] = useState();
  return (
    <div className="tips">
      <ul className="tips__list">
      {list &&  tips.map((item.tip) =>
         return (
          <li key={item.tip} className="tips__item">{item.tip}</li>
        );
      )}
      </ul>
    </div>
  );
}

export default Tips;

>Solution :

Your .map() should be called in your list variable.

  return (
    <div className="tips">
      <ul className="tips__list">
        {list &&
          list.map((item) => 
            <li key={item.tip} className="tips__item">
              {item.tip}
            </li>
          )}
      </ul>
    </div>
  );