Multiple readmore buttons working at the same time-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

Parent element returned from the escritos.map(escrito => {JSX}) should contain a key attribute with unique value. Read more here