In React, how to setState a Data by using hook useState?-CodePudding

I am just getting started learning React Functional component and styled- component. I tried to setState detailePageData

const const [marketPriceData, setMarketPriceData] = useState([]);

and I tried to set up the marketPriceData by using JSON file.

useEffect(() => {
    fetch(`/data/detailPageData.json`)
      .then(res => res.json())
      .then(data => setMarketPriceData(data.result.order_history));
  }, []);

When I console.log marketPriceData. I got this

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

useEffect(() => {
    fetch(`/data/detailPageData.json`)
      .then(res => res.json())
      .then(data => setMarketPriceData(data.result.order_history));
  }, []);

First, I think "Can I use foreach method? or for loop..?" 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?

Just in case, I will leave the whole 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(() => {
  //   let i = 1;
  //   if (i < detailPageData.order_history.length) {
  //     setMarketPriceData(detailPageData.order_history[i].price);
  //   }
  // },[]);

  const [detailPageData, setDetailPageData] = useState([]);

  useEffect(() => {
    fetch(`/data/detailPageData.json`)
      .then(res => res.json())
      .then(data => setDetailPageData(data.result));
  }, []);

  useEffect(() => {
    fetch(`/data/detailPageData.json`)
      .then(res => res.json())
      .then(data => 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 => {
    setCurrentMenuIndex(tabIndex);
  };

  const openModal = () => {
    setShowModal(prev => !prev);
  };
  return (
    <MarketPriceWrapper>
      <TitleWrapper>
        <MarketPriceTitle>시세</MarketPriceTitle>
        <ShowAllSizes>
          {/* <AllSize>230</AllSize>
          <FaRegArrowAltCircleDown /> */}
          <DropDownMenu className={DropDownMenu} />
        </ShowAllSizes>
      </TitleWrapper>
      <SalesGraphWrapper>
        <Line data={data} options={options} />
      </SalesGraphWrapper>
      <ButtonsWrapper>
        <Button
          isActive={currentMenuIndex === 1}
          onClick={() => handleSelectedMenu(1)}
        >
          체결 거래
        </Button>
        <Button
          isActive={currentMenuIndex === 2}
          onClick={() => handleSelectedMenu(2)}
        >
          판매 입찰
        </Button>
        <Button
          isActive={currentMenuIndex === 3}
          onClick={() => handleSelectedMenu(3)}
        >
          구매 입찰
        </Button>
      </ButtonsWrapper>
      <TableWrapper>
        <TableColumnSetting>
          <SizeName>사이즈</SizeName>
          <PriceName>거래가</PriceName>
          <DateName>거래일</DateName>
        </TableColumnSetting>
        <RowSection>
          {/* {detailPageData.market_price &&
            detailPageData.market_price.map(price => {
              return console.log(price.sizes[0]);
              <Size key={price.id}>
                <Size>{price.sizes[price.id].size}</Size>
                <Price>{price.sizes[price.id].avg_price}</Price>
                <Date>{price.date}</Date>
              </Size>
            })} */}
          <Size />
          <Price>24,000원</Price>
          <Date>99/11/17</Date>
        </RowSection>
        <RowSection>
          <Size />
          <Price>24,000원</Price>
          <Date>99/11/17</Date>
        </RowSection>
        <RowSection>
          <Size />
          <Price>24,000원</Price>
          <Date>99/11/17</Date>
        </RowSection>
        <RowSection>
          <Size />
          <Price>24,000원</Price>
          <Date>99/11/17</Date>
        </RowSection>
        <RowSection>
          <Size />
          <Price>24,000원</Price>
          <Date>99/11/17</Date>
        </RowSection>
        <OrderHistoryButton onClick={openModal}>
          체결 내역 더보기
        </OrderHistoryButton>
        <Modal showModal={showModal} setShowModal={setShowModal}>
          <TransitionHistoryModalStyling
            detailPageDataMarket={detailPageData}
          />
        </Modal>
      </TableWrapper>
    </MarketPriceWrapper>
  );
}

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 => (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;
`;

CodePudding user response：

const const [marketPriceData, setMarketPriceData] = useState([]);

useEffect(() => {
    fetch(`/data/detailPageData.json`)
      .then(res => res.json())
      .then(data => setMarketPriceData(data.result. order_history.map(item => item.price));
  }, []);

CodePudding user response：

maybe you can use map in your object data result.

data.result.order_history.map((item)=>{
   return item.price
}

That will only get de price property in in your array.

setMarketPriceData(data.result.order_history.map((item)=>{
   return item.price
})