title: How can I resolve a single reference in react?
body: <p>fruit json value.</p>
  <pre><code>console.log(fruit)
  [
      {
        content: &quot;apple&quot;,
        information: [
          {
              calorie: &quot;122&quot;
          },
        ],
      },
      {
          content: &quot;banana&quot;,
          information: [
            {
              calorie: &quot;221&quot;
            },
          ],
        },
      {
          content: &quot;mango&quot;,
          information: [
            {
              calorie: &quot;52&quot;
            },
          ],
      },
  ];
  </code></pre>
  <p>Create a button by running the map function on the information on the fruit.<br/></p>
  <p>The dynamically created button is {value.calorie} first button 122 second button 221 third button 52 is created.<br/></p>
  <p>And the content also maps function to fruit and puts {fruit.content} as the argument value in the button.<br/></p>
  <p>And set useRef so that when the value.calorie button is clicked, the fruit content button is also clicked.<br/></p>
  <pre><code>const Content = useRef(null);
  const Calorie = useRef(null);
  
  
  const onClickContent = (content) =&gt; {
    console.log(content);
  };
  
  const onClickCalorie = (calorie) =&gt; {
    Content.current.click();
    console.log(calorie);
  };
  
  return (
    &lt;&gt;
  
      fruit.map((Fields, index) =&gt; (
    &lt;&gt;
    &lt;p&gt;{Fields.content}&lt;/p&gt;
    &lt;button style={{&quot;display&quot;: &quot;none&quot;}} ref={Content} onClick={() =&gt; onClickContent(Fields.content)}&gt;&lt;/button&gt;
    &lt;/&gt;
  
    {Fields.information.map((Value, key) =&gt; {
        return (
            &lt;&gt;
            &lt;p&gt;{Value.calorie}&lt;/p&gt;
            &lt;button onClick={() =&gt; onClickCalorie(Value.calorie)}&gt;{Value.calorie}&lt;/button&gt;
            &lt;/&gt;
        )
    })}
    ))
    &lt;/&gt;
  )
  </code></pre>
  <p>The problem is that when you click the 122 displayed on the button, the content is also output to the console, apple should be output, but mango is output.<br/>
  If you click the button with calorie 221, banan should be output, but mango is output to the console. This is said to be because of a single reference.<br/>
  How can I solve the single reference function? I do not know.<br/></p>