title: How can i pass a return value into a useEffect in Reactjs?
body: <p>i'm creating a store that when u click on the button you'll be redirected to paypal, but i came across a doubt about how i could pass my value of the cost into the button but first of all into the value amount of paypal?</p>
  <p>the data is taken from the database using mysql and then axios, as u can see i used a map and named val with the variable of database:</p>
  <p>That's my code:</p>
  <pre><code>import React,{useState, useEffect, useRef} from 'react'
  import Axios from 'axios'
  import Navbar from '../Navbar/Navbar'
  import styled from 'styled-components'
  import { Desc } from '../Store/Desc'
  import { ButtonStore } from '../Buttons/Button/Button'
  import './Store.css'
  
  
  function Store() {
  
  const [cards, setCards] = useState([])
  const [payValue, setPayValue] = useState(&quot;&quot;);
  
  const paypal = useRef()
  
  useEffect(() =&gt; {
  Axios.get(&quot;http://localhost:3001/gems&quot;, {
  }).then((response) =&gt; {
  setCards(response.data);
  })
  }, [])
  
  useEffect(() =&gt; {
  window.paypal.Buttons({
      createOrder: (data, actions, err) =&gt; {
          return actions.order.create({
              intent: &quot;CAPTURE&quot;,
              purchase_units: [{
                  description: 'Points',
                  amount: {
                      currency_code: &quot;EUR&quot;,
                      value: // HERE IS WHERE I WANT TO DEFINE THE VALUE WHEN I CLICK THE BUTTON
                  }
              }]
          })
      },
      onApprove: async(data, actions) =&gt; {
          const order = await actions.order.capture()
          console.log(order)
      },
      onError: (err) =&gt; {
          console.log(err)
      }
  }).render(paypal.current)
  }, [])
  
  return (
      &lt;&gt;
      &lt;Navbar/&gt;
      &lt;HeroContainer&gt;
      &lt;HeroBg&gt;
      &lt;/HeroBg&gt;
      &lt;HeroContent&gt;
        &lt;HeroItems&gt;
            &lt;HeroH1&gt;get more points and unlock new content!&lt;/HeroH1&gt;
            &lt;HeroH6&gt;Gems&lt;/HeroH6&gt;
            {cards.map((val) =&gt; {
            const a = val.Price1;
            return(
            &lt;div className=&quot;flex&quot;&gt;
            &lt;div className=&quot;columns&quot;&gt;
            &lt;ul className=&quot;price&quot;&gt;
            &lt;li className=&quot;header&quot;&gt;&lt;/li&gt;
            &lt;li className=&quot;grey&quot;&gt;$ {val.Price1}&lt;/li&gt;
            &lt;li&gt;{val.Point1}&lt;/li&gt;
            &lt;ButtonStore value={a}/&gt; //That's my button where i tried to pass the value
            &lt;/ul&gt;
            &lt;/div&gt;   
            &lt;div className=&quot;columns&quot;&gt;
            &lt;ul className=&quot;price&quot;&gt;
            &lt;li className=&quot;header&quot;&gt;&lt;/li&gt;
            &lt;li className=&quot;grey&quot;&gt;$ {val.Price2}&lt;/li&gt;
            &lt;li&gt;{val.Point2}&lt;/li&gt;
            &lt;ButtonStore/&gt;
            &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div className=&quot;columns&quot;&gt;
            &lt;ul className=&quot;price&quot;&gt;
            &lt;li className=&quot;header&quot;&gt;&lt;/li&gt;
            &lt;li className=&quot;grey&quot;&gt;$ {val.Price3}&lt;/li&gt;
            &lt;li&gt;{val.Point3}&lt;/li&gt;
            &lt;ButtonStore value={val.Price3}/&gt;
            &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div className=&quot;columns&quot;&gt;
            &lt;ul className=&quot;price&quot;&gt;
            &lt;li className=&quot;header&quot;&gt;&lt;/li&gt;
            &lt;li className=&quot;grey&quot;&gt;$ {val.Price4}&lt;/li&gt;
            &lt;li&gt;{val.Point4}&lt;/li&gt;
            &lt;ButtonStore/&gt;
            &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div className=&quot;columns&quot;&gt;
            &lt;ul className=&quot;price&quot;&gt;
            &lt;li className=&quot;header&quot;&gt;&lt;/li&gt;
            &lt;li className=&quot;grey&quot;&gt;$ {val.Price5}&lt;/li&gt;
            &lt;li&gt;{val.Point5}&lt;/li&gt;
            &lt;ButtonStore/&gt;
            &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div className=&quot;columns&quot;&gt;
            &lt;ul className=&quot;price&quot;&gt;
            &lt;li className=&quot;header&quot;&gt;&lt;/li&gt;
            &lt;li className=&quot;grey&quot;&gt;$ {val.Price6}&lt;/li&gt;
            &lt;li&gt;{val.Point6}&lt;/li&gt;
            &lt;ButtonStore/&gt;
            &lt;/ul&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            )})}
        &lt;/HeroItems&gt;
      &lt;/HeroContent&gt;
      &lt;div className=&quot;Paypalinv&quot;&gt;
          &lt;div ref={paypal}&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/HeroContainer&gt;
  &lt;/&gt;
  )}
  export default Store
  </code></pre>
  <p>So how can i pass the value of my price to the button and then into the amount of paypal? thanks!!</p>