title: Need to find object from an array with two objects
body: <p>I am trying to find an object from an array of objects. I am using NextJs, React 17.0.2, typescript 4.5.4, framer-motion and tailwindcss.</p>
  <p>Here's the array:</p>
  <pre><code>// rolls.js
  const Rolls = [
    {
      titulo: &quot;MERV 8&quot;,
      rolls: [
        {
          medida: 16,
          existencia: 15,
          id: &quot;MERV816&quot;
        },
        {
          medida: 20,
          existencia: 25,
          id: &quot;MERV820&quot;
        },
        {
          medida: 24,
          existencia: 12,
          id: &quot;MERV824&quot;
        },
        {
          medida: 25,
          existencia: 10,
          id: &quot;MERV825&quot;
        }
      ]
    },
    {
      titulo: &quot;MERV 13&quot;,
      rolls: [
        {
          medida: 16,
          existencia: 15,
          id: &quot;MERV1316&quot;
        },
        {
          medida: 20,
          existencia: 25,
          id: &quot;MERV1320&quot;
        },
        {
          medida: 24,
          existencia: 12,
          id: &quot;MERV1324&quot;
        },
        {
          medida: 25,
          existencia: 10,
          id: &quot;MERV1325&quot;
        }
      ]
    }
  ];
  
  export default Rolls;
  </code></pre>
  <p>And here is the component:</p>
  <pre><code>// app.tsx
  import &quot;./styles.css&quot;;
  import { useState } from &quot;react&quot;;
  import PageTitle from &quot;./PageTitle&quot;;
  import Rolls from &quot;./rolls&quot;;
  
  export default function App() {
    const [selectedRoll, setSelectedRoll] = useState(&quot;none&quot;);
    const [quantity, setQuantity] = useState(0);
  
    const decreaseQuantity = () =&gt; {
      if (quantity &gt; 0) {
        setQuantity(quantity - 1);
      }
    };
  
    const increaseQuantity = () =&gt; {
      if (quantity &lt; 10) {
        setQuantity(quantity + 1);
      }
    };
  
    const selectARoll = (e: any) =&gt; {
      e.preventDefault();
      setSelectedRoll(e.target.value);
    };
  
    return (
      &lt;main className={&quot;p-4 font-mono&quot;}&gt;
        &lt;PageTitle title=&quot;Producción&quot; /&gt;
  
        &lt;h2 className={&quot;text-orange-400 font-bold text-2xl&quot;}&gt;Inventario&lt;/h2&gt;
        {Rolls.map((v, i) =&gt; {
          return (
            &lt;section key={i} className=&quot;grid gap-4 md:grid-cols-6&quot;&gt;
              &lt;h2 className=&quot;font-bold text-xl pt-4 md:col-span-6&quot;&gt;
                Eficiencia: {v.titulo}
              &lt;/h2&gt;
              {v.rolls.map((v, i) =&gt; {
                return (
                  &lt;div
                    className=&quot;grid dark:border-white border-black border-2 rounded-md p-2 gap-2 &quot;
                    key={i}
                  &gt;
                    &lt;div className=&quot;border-b-2 dark:border-white border-black flex justify-between&quot;&gt;
                      &lt;span&gt;Medida:&lt;/span&gt;
                      &lt;span&gt;{v.medida}&lt;/span&gt;
                    &lt;/div&gt;
  
                    &lt;div className=&quot;border-b-2 dark:border-white border-black flex justify-between&quot;&gt;
                      &lt;span&gt;Existencia:&lt;/span&gt;
                      &lt;span&gt;{v.existencia}&lt;/span&gt;
                    &lt;/div&gt;
  
                    &lt;div className=&quot;border-b-2 dark:border-white border-black flex justify-between&quot;&gt;
                      &lt;span&gt;ID:&lt;/span&gt;
                      &lt;span&gt;{v.id}&lt;/span&gt;
                    &lt;/div&gt;
  
                    &lt;button
                      className=&quot;py-2&quot;
                      onClick={selectARoll}
                      value={v.id}
                      whileHover={{ y: -3 }}
                      whileTap={{ y: 0 }}
                    &gt;
                      select
                    &lt;/button&gt;
                  &lt;/div&gt;
                );
              })}
            &lt;/section&gt;
          );
        })}
  
        &lt;section className=&quot;py-4&quot;&gt;
          &lt;h2 className={&quot;text-orange-400 font-bold text-2xl&quot;}&gt;
            Control de rollos
          &lt;/h2&gt;
          &lt;h3 className=&quot;py-4 font-bold text-2xl&quot;&gt;
            Selected roll: {selectedRoll}
          &lt;/h3&gt;
          {/* 
              I would like to display all the object's information here. 
              Right now it's just a string.
          */}
  
  
  
          {/* 
              This is an extra, but it would be nice to be able to modify the 
              existing quantity of rolls with these buttons. Maybe it is for 
              another question, please let me know.
          */}
          &lt;span&gt;Quantity of rolls used today:&lt;/span&gt;
          &lt;div className=&quot;flex py-4 gap-4&quot;&gt;
            &lt;div className=&quot;md:w-1/4 w-full flex justify-between font-bold text-xl&quot;&gt;
              &lt;button
                className=&quot;border-2 dark:border-white border-black rounded-md px-2&quot;
                onClick={decreaseQuantity}
                whileHover={{ y: -3 }}
                whileTap={{ y: 0 }}
              &gt;
                menos
              &lt;/button&gt;
              &lt;span&gt;{quantity}&lt;/span&gt;
              &lt;button
                className=&quot;border-2 dark:border-white border-black rounded-md px-2&quot;
                onClick={increaseQuantity}
                whileHover={{ y: -3 }}
                whileTap={{ y: 0 }}
              &gt;
                mas
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div className=&quot;w-1/4  flex content-center justify-center&quot;&gt;
              &lt;button
                className=&quot;border-2 dark:border-white border-black rounded-md px-2&quot;
                whileHover={{ y: -3 }}
                whileTap={{ y: 0 }}
              &gt;
                confirm
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/main&gt;
    );
  }
  
  </code></pre>
  <p>My question is, how can I make selectedRoll the value of the object that was selected? For example, if I press the object button with id MERV820, that the selectedRoll returns all the data of that object?</p>
  <p>Please let me know any other thing that you see is wrong or should be better, maybe structure the json different, learn about arrays, I don't know. Mentoring is appreciated. Thanks.</p>
  <p>Here's the sandbox:
  <a href="https://codesandbox.io/embed/zealous-alex-rqvy2?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/zealous-alex-rqvy2?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>