title: React get value from key:value array
body: <p>Beginner question. I know this is a simple question but I haven't been able to get this to work. I'm passing an object which holds an array of k:v pairs to a component. Eventually this props will contain multiple k:v pairs, but for now I'm just passing the one.</p>
  <pre><code>[{goal: 20000}]
  </code></pre>
  <p>In the component I'm trying to grab the value, 20000, so I can display it on screen. I can't seem to get just the number. If I look at props.goal I get the entire k:v.</p>
  <pre><code>[{goal: 20000}]
  </code></pre>
  <p>If I try props[0].goal I get 'TypeError: undefined is not an object (evaluating 'props[0].goal')'</p>
  <p>What am I missing? Thanks for any help.</p>
  <p>Update:
  Here is the entire code for the component in question.</p>
  <pre><code>import { React, useState } from &quot;react&quot;;
  import Form from &quot;react-bootstrap/Form&quot;;
  import { Row, Col, Button } from &quot;react-bootstrap&quot;;
  import &quot;./../css/Goal.css&quot;;
  
  const Goal = (props) =&gt; {
    // const [goal, setGoal] = useState(&quot;&quot;);
    const [record, setRecord] = useState(&quot;&quot;);
    const monthlyGoal = 2;
  
    console.log(&quot;props[0]&quot;);
    console.log(props[0]); //undefined
    console.log(&quot;props&quot;);
    console.log({ props }); //See below
  </code></pre>
  <blockquote>
  <p>props: Object</p>
  <p>goal: Object</p>
  <p>goals: [{goal: 20000}] (1)</p>
  </blockquote>
  <pre><code>  const handleInput = (event) =&gt; {
      console.log(event);
      event.preventDefault();
      setRecord(event.target.value);
      console.log(record);
    };
  
    const defaultOptions = {
      significantDigits: 2,
      thousandsSeparator: &quot;,&quot;,
      decimalSeparator: &quot;.&quot;,
      symbol: &quot;$&quot;,
    };
  
    const formattedMonthlyGoal = (value, options) =&gt; {
      if (typeof value !== &quot;number&quot;) value = 0.0;
      options = { ...defaultOptions, ...options };
      value = value.toFixed(options.significantDigits);
  
      const [currency, decimal] = value.split(&quot;.&quot;);
      return `${options.symbol} ${currency.replace(
        /\B(?=(\d{3})+(?!\d))/g,
        options.thousandsSeparator
      )}${options.decimalSeparator}${decimal}`;
    };
  
    return (
      &lt;Form&gt;
        &lt;Row className=&quot;align-items-center flex&quot;&gt;
          &lt;Col sm={3} className=&quot;goal sm={3}&quot;&gt;
            &lt;Form.Control
              id=&quot;inlineFormInputGoal&quot;
              placeholder=&quot;Goal&quot;
              // onChange={(e) =&gt; setGoal(e.target.value)}
            /&gt;
            &lt;Button type=&quot;submit&quot; className=&quot;submit btn-3&quot; onSubmit={handleInput}&gt;
              Submit
            &lt;/Button&gt;
          &lt;/Col&gt;
          &lt;Col&gt;
            &lt;h1 className=&quot;text-box&quot;&gt;
              Goal: {formattedMonthlyGoal(monthlyGoal)}
            &lt;/h1&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Form&gt;
    );
  };
  export default Goal;
  </code></pre>
  <p>Update 2:Here is the parent component:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import Goal from &quot;./Goal&quot;;
  import axios from &quot;axios&quot;;
  
  const Dashboard = () =&gt; {
    const [dashboardinfo, setdashboardinfo] = useState([]);
    useEffect(() =&gt; {
      async function fetchData() {
        try {
          const data = (await axios.get(&quot;/api/goals/getgoals&quot;)).data;
          setdashboardinfo(data);
        } catch (error) {
          console.log(error);
        }
      }
      fetchData();
    }, []);
  
    return (
      &lt;React.Fragment&gt;
        &lt;Goal dashboardinfo={dashboardinfo} /&gt;
       
      &lt;/React.Fragment&gt;
    );
  };
  
  export default Dashboard;
  </code></pre>