Les variables de couleur changent pour chaque élément cartographié. Tailwind réagit

Question

Je veux qu'une fois que j'ajoute un autre élément à la liste, la couleur de l'élément précédent ne change pas

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const color = randomColorFunction(colors);
  return (
    <div
      className={`flex flex-col min-h-28  py-6 justify-between px-3 rounded-md whitespace-pre-wrap break-words`}
      style={{ backgroundColor: `${color}` }}
    >
      <span className="font-bold text-3xl">{note.title}</span>
      <span>{note.content}</span>
      <small className="text=xl">{note.date}</small>
    </div>
  );
};

Answer 1

Vous pouvez résoudre ce problème de deux manières

1. Utilisez des guillemets

import { useRef } from "react";

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const color = useRef(randomColorFunction(colors));

  return (
    

      ...
    
  );
};

2.Statut d'utilisation

import { useState } from "react";

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const [color] = useState(randomColorFunction(colors));

  return (
    

      ...
    
  );
};

Si vous ne souhaitez pas changer la couleur, je pense que useRef est plus adaptée.

Voir iciAperçu en direct