Issue with list and keys in React JS

Question

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;

reactjs.org/docs/lists-and-keys.html#keys Please always check the docs before posting here. — user5734311
– user5734311, Commented Jan 26, 2022 at 19:06
What is tips? Did you mean to do list.map(....? What is the issue? what is your question? — Drew Reese
– Drew Reese, Commented Jan 26, 2022 at 19:06
Array#map documentation with examples: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Felix Kling
– Felix Kling, Commented Jan 26, 2022 at 19:08

Danylo Kucherenko · Accepted Answer · 2022-01-26 19:12:05Z

3

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>
  );

answered Jan 26, 2022 at 19:12

Danylo Kucherenko

1012 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ToldiReloaded Over a year ago

Thanks, this helped solved my problem. Got confused with the map function, which you helped clear up. Will accept your answer when the cool down allows me.

Super Kai - Kazuya Ito · Accepted Answer · 2022-02-10 12:36:42Z

0

Simply add it like this

<li key={item.key}>{item.tip}</li>

edited Feb 10, 2022 at 12:36

Super Kai - Kazuya Ito

42.8k23 gold badges258 silver badges257 bronze badges

answered Jan 26, 2022 at 19:11

Rman__

1852 silver badges13 bronze badges

1 Comment

Luca Kiebel Over a year ago

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Collectives™ on Stack Overflow

Issue with list and keys in React JS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related