Multiple readmore buttons working at the same time

Solution 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.