title: In React, how to setState a Data by using hook useState?
body: <p>I am just getting started learning React Functional component and styled- component. I tried to setState detailePageData</p>
  <pre><code>const const [marketPriceData, setMarketPriceData] = useState([]);
  </code></pre>
  <p>and I tried to set up the marketPriceData by using JSON file.</p>
  <pre><code>useEffect(() =&gt; {
      fetch(`/data/detailPageData.json`)
        .then(res =&gt; res.json())
        .then(data =&gt; setMarketPriceData(data.result.order_history));
    }, []);
  </code></pre>
  <p>When I console.log marketPriceData. I got this
  <a href="https://i.stack.imgur.com/3nDXV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nDXV.png" alt="enter image description here" /></a></p>
  <p>In here, I only need the price in each array. So, when I console.log(marketPriceData[0].price); I got 378000 what I expected.
  Here is my main question, I only need each array price such as; 378000,341000,388000, etc.
  I think I have to edit this part</p>
  <pre><code>useEffect(() =&gt; {
      fetch(`/data/detailPageData.json`)
        .then(res =&gt; res.json())
        .then(data =&gt; setMarketPriceData(data.result.order_history));
    }, []);
  </code></pre>
  <p>First, I think &quot;Can I use foreach method? or for loop..?&quot; I am not sure how to setup the logic to store the setMarketPriceData. Could you please help me with how to get the price what I expected?</p>
  <p>Just in case, I will leave the whole code,</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import styled from 'styled-components';
  import { FaRegArrowAltCircleDown } from 'react-icons/fa';
  import { Line } from 'react-chartjs-2';
  import { Modal } from './components/Modal';
  import TransitionHistoryModalStyling from '../ProductDetail/components/TransitionHistoryModalStyling';
  import DropDownMenu from '../ProductDetail/components/DropDownMenu';
  const options = {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };
  export default function MarketPrice() {
    const [showModal, setShowModal] = useState(false);
    const [marketPriceData, setMarketPriceData] = useState([]);
  
    // https://github.com/reactchartjs/react-chartjs-2/blob/master/example/src/charts/Line.js
    const data = {
      labels: ['1', '2', '3', '4', '5', '6'],
      datasets: [
        {
          label: 'MarketPrice',
          data: marketPriceData,
          fill: false,
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgba(255, 99, 132, 0.2)',
        },
      ],
    };
  
    // useEffect(() =&gt; {
    //   let i = 1;
    //   if (i &lt; detailPageData.order_history.length) {
    //     setMarketPriceData(detailPageData.order_history[i].price);
    //   }
    // },[]);
  
    const [detailPageData, setDetailPageData] = useState([]);
  
    useEffect(() =&gt; {
      fetch(`/data/detailPageData.json`)
        .then(res =&gt; res.json())
        .then(data =&gt; setDetailPageData(data.result));
    }, []);
  
    useEffect(() =&gt; {
      fetch(`/data/detailPageData.json`)
        .then(res =&gt; res.json())
        .then(data =&gt; setMarketPriceData(data.result.order_history));
    }, []);
  
    console.log(marketPriceData);
    console.log(marketPriceData[0].price);
    // console.log(detailPageData.market_price[0].sizes[0].size);
    // console.log(detailPageData.order_history);
    // console.log(detailPageData.order_history.length);
    // console.log(detailPageData.order_history[0].price);
    // console.log(detailPageData.order_history.price);
    const [currentMenuIndex, setCurrentMenuIndex] = useState(1);
  
    const handleSelectedMenu = tabIndex =&gt; {
      setCurrentMenuIndex(tabIndex);
    };
  
    const openModal = () =&gt; {
      setShowModal(prev =&gt; !prev);
    };
    return (
      &lt;MarketPriceWrapper&gt;
        &lt;TitleWrapper&gt;
          &lt;MarketPriceTitle&gt;시세&lt;/MarketPriceTitle&gt;
          &lt;ShowAllSizes&gt;
            {/* &lt;AllSize&gt;230&lt;/AllSize&gt;
            &lt;FaRegArrowAltCircleDown /&gt; */}
            &lt;DropDownMenu className={DropDownMenu} /&gt;
          &lt;/ShowAllSizes&gt;
        &lt;/TitleWrapper&gt;
        &lt;SalesGraphWrapper&gt;
          &lt;Line data={data} options={options} /&gt;
        &lt;/SalesGraphWrapper&gt;
        &lt;ButtonsWrapper&gt;
          &lt;Button
            isActive={currentMenuIndex === 1}
            onClick={() =&gt; handleSelectedMenu(1)}
          &gt;
            체결 거래
          &lt;/Button&gt;
          &lt;Button
            isActive={currentMenuIndex === 2}
            onClick={() =&gt; handleSelectedMenu(2)}
          &gt;
            판매 입찰
          &lt;/Button&gt;
          &lt;Button
            isActive={currentMenuIndex === 3}
            onClick={() =&gt; handleSelectedMenu(3)}
          &gt;
            구매 입찰
          &lt;/Button&gt;
        &lt;/ButtonsWrapper&gt;
        &lt;TableWrapper&gt;
          &lt;TableColumnSetting&gt;
            &lt;SizeName&gt;사이즈&lt;/SizeName&gt;
            &lt;PriceName&gt;거래가&lt;/PriceName&gt;
            &lt;DateName&gt;거래일&lt;/DateName&gt;
          &lt;/TableColumnSetting&gt;
          &lt;RowSection&gt;
            {/* {detailPageData.market_price &amp;&amp;
              detailPageData.market_price.map(price =&gt; {
                return console.log(price.sizes[0]);
                &lt;Size key={price.id}&gt;
                  &lt;Size&gt;{price.sizes[price.id].size}&lt;/Size&gt;
                  &lt;Price&gt;{price.sizes[price.id].avg_price}&lt;/Price&gt;
                  &lt;Date&gt;{price.date}&lt;/Date&gt;
                &lt;/Size&gt;
              })} */}
            &lt;Size /&gt;
            &lt;Price&gt;24,000원&lt;/Price&gt;
            &lt;Date&gt;99/11/17&lt;/Date&gt;
          &lt;/RowSection&gt;
          &lt;RowSection&gt;
            &lt;Size /&gt;
            &lt;Price&gt;24,000원&lt;/Price&gt;
            &lt;Date&gt;99/11/17&lt;/Date&gt;
          &lt;/RowSection&gt;
          &lt;RowSection&gt;
            &lt;Size /&gt;
            &lt;Price&gt;24,000원&lt;/Price&gt;
            &lt;Date&gt;99/11/17&lt;/Date&gt;
          &lt;/RowSection&gt;
          &lt;RowSection&gt;
            &lt;Size /&gt;
            &lt;Price&gt;24,000원&lt;/Price&gt;
            &lt;Date&gt;99/11/17&lt;/Date&gt;
          &lt;/RowSection&gt;
          &lt;RowSection&gt;
            &lt;Size /&gt;
            &lt;Price&gt;24,000원&lt;/Price&gt;
            &lt;Date&gt;99/11/17&lt;/Date&gt;
          &lt;/RowSection&gt;
          &lt;OrderHistoryButton onClick={openModal}&gt;
            체결 내역 더보기
          &lt;/OrderHistoryButton&gt;
          &lt;Modal showModal={showModal} setShowModal={setShowModal}&gt;
            &lt;TransitionHistoryModalStyling
              detailPageDataMarket={detailPageData}
            /&gt;
          &lt;/Modal&gt;
        &lt;/TableWrapper&gt;
      &lt;/MarketPriceWrapper&gt;
    );
  }
  
  const MarketPriceWrapper = styled.div`
    width: 550px;
    margin-top: 40px;
    padding-left: 40px;
  `;
  
  const TitleWrapper = styled.div`
    display: flex;
    padding-top: 19px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
  `;
  const SalesGraphWrapper = styled.div``;
  const MarketPriceTitle = styled.span`
    padding-top: 4px;
    display: inline-block;
    line-height: 16px;
    font-weight: bold;
    color: #222;
  `;
  const ShowAllSizes = styled.div`
    margin-left: 370px;
  `;
  const AllSize = styled.span`
    display: inline-block;
    margin-right: 5px;
    margin-left: 350px;
    font-size: 18px;
  `;
  
  const ButtonsWrapper = styled.div`
    display: flex;
    justify-content: space-evenly;
    margin-top: 40px;
    border-radius: 10px;
    background-color: #f4f4f4;
  `;
  
  const Button = styled.button`
    display: block;
    margin: 2px;
    line-height: 16px;
    padding: 7px 0 9px;
    width: 400px;
    font-size: 13px;
    text-align: center;
    border-radius: 8px;
    border: none;
    background-color: ${props =&gt; (props.isActive ? '#ffff' : '#f4f4f4')};
    color: rgba(34, 34, 34, 0.8);
  `;
  
  const TableWrapper = styled.div`
    margin-top: 40px;
  `;
  
  const TableColumnSetting = styled.div`
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 9px;
    text-align: right;
  `;
  
  const SizeName = styled.span`
    display: inline-block;
    margin-right: 250px;
    font-size: 12px;
    color: rgba(34, 34, 34, 0.5);
    font-weight: 400;
  `;
  const PriceName = styled.span`
    display: inline-block;
    margin-right: 150px;
    font-size: 12px;
    color: rgba(34, 34, 34, 0.5);
    font-weight: 400;
  `;
  const DateName = styled.span`
    display: inline-block;
    font-size: 12px;
    color: rgba(34, 34, 34, 0.5);
    font-weight: 400;
  `;
  
  const RowSection = styled.div`
    margin-top: 4px;
    text-align: right;
  `;
  
  const Size = styled.span`
    display: inline-block;
    margin-right: 240px;
    color: #222;
    font-size: 12px;
  `;
  const Price = styled.span`
    display: inline-block;
    margin-right: 130px;
    color: #222;
    font-size: 12px;
  `;
  const Date = styled.span`
    display: inline-block;
    color: #222;
    font-size: 12px;
  `;
  
  const OrderHistoryButton = styled.button`
    border: 1px solid #d3d3d3;
    margin-top: 40px;
    background-color: #ffffff;
    color: rgba(34, 34, 34, 0.8);
    font-weight: 400;
    padding: 0 18px;
    width: 500px;
    height: 42px;
    border-radius: 12px;
    font-size: 14px;
  `;
  </code></pre>