Render elements in order by array

Question

const Chat = () => {
  const [array1, setArray1] = useState(['one', 'two', 'three', 'four', 'five']);
  const [array2, setArray2] = useState(['four', 'two']);

  return (
    <div>
      <ul>
        {array1.map((d) => {
          return array2.forEach((e) => {
            return d === e ? <li>{e}</li> : '';
          });
        })}
      </ul>
    </div>
  );
};

export default Chat;

I expect my list items to render in order:

-"two"

-"four"

My logic, I will go through array1 and if I find matches from array2, then output them to the renderer. However, nothing comes to the render at all. Tell me what am I doing wrong?

ForEach will not return anything use map instead. – Subramonian Inian Dec 19 '22 at 18:43 — Subramonian Inian, Dec 19 '22 at 18:43

score 2 · Answer 1 · answered Dec 19 '22 at 18:42

The issue is that your for each method does not return anything, so you're really just returning an array of undefined. You can keep the same logic, even though it's a bit odd to set something in state that you won't mutate:

const Chat = () => {
  const [array1, setArray1] = useState(["one", "two", "three", "four", "five"]);
  const [array2, setArray2] = useState(["four", "two"]);
  return (
    <div>
      <ul>
        {array1.flatMap((d) => {
          return array2.map((e) => {
            return d === e ? <li>{e}</li> : "";
          });
        })}
      </ul>
    </div>
  );
};

export default Chat;

Since you're returning an array of arrays technically, and flat map does the same logic and flattens the result.

score 1 · Answer 2 · answered Dec 19 '22 at 19:19

You can do:

const Chat = () => {
  const [array1, setArray1] = useState(['one', 'two', 'three', 'four', 'five'])
  const [array2, setArray2] = useState(['four', 'two'])
  return (
    <div>
      <ul>
        {array1
          .filter((e) => array2.includes(e))
          .map((e) => (
            <li>{e}</li>
          ))}
      </ul>
    </div>
  )
}

export default Chat

Render elements in order by array

2 Answers2