Multiple readmore buttons working at the same time

Question

Good Morning.

I'm trying to use "readmore" buttons on texts coming from the firestore

<section className="escritos">
  {escritos.map(escrito => {
    return (
      <div>
        <p>
          Autor: <strong>{escrito.autor}</strong>
        </p>
        <p>
          {" "}
          Título: <strong>{escrito.titulo}</strong>
        </p>
        <div id="obras">
          {" "}
          {readmore
            ? parse(escrito.escrito)
            : parse(escrito.escrito.substring(0, 200))}
          <button id="readmore" onClick={() => setReadmore(!readmore)}>
            {readmore ? "ler menos" : "ler mais"}
          </button>
          <Link to="#beginning">
            <BsFillArrowUpCircleFill />
          </Link>
        </div>
        <hr />
      </div>
    );
  })}
</section>

It's working. But it works at the same time for all buttons.

I've already tried to use react-read-more, but there was an error because I have to use parse(escrito.escrito) to remove the html tags. Removing the parse, it works but with the tags showing.

It has something to do with the map I believe, but I haven't been able to solve it yet.

Here's the site and here's the repository if it helps.

Thank you in advance for your attention and your time.

Answer 1

Since you want the readmore state to be applied to the individual boxes you could store an array in the state and check, if the id is set, but I would go with the (in my opinion) simpler way:

Extract your block into its own component, which has its own state readmore like so:

<section className="escritos">
  {escritos.map(escrito => (
     <Escrito escrito={escrito} key={escrito.id} />
   ))}
</section>

// Escrito.jsx
const Escrito = ({escrito}) => {
    const [readmore, setReadmore] = useState(false);
    return (
      <div>
        <p>
          Autor: <strong>{escrito.autor}</strong>
        </p>
        <p>
          {" "}
          Título: <strong>{escrito.titulo}</strong>
        </p>
        <div id="obras">
          {" "}
          {readmore
            ? parse(escrito.escrito)
            : parse(escrito.escrito.substring(0, 200))}
          <button id="readmore" onClick={() => setReadmore(!readmore)}>
            {readmore ? "ler menos" : "ler mais"}
          </button>
          <Link to="#beginning">
            <BsFillArrowUpCircleFill />
          </Link>
        </div>
        <hr />
      </div>
    );
}

export default Escrito;

Since each component now has its own state, this should be the behavior you want.