"Undefined" problem when receiving data from api

I'm improving myself on reactjs. I'm trying to build an e-commerce site. I use Mock Api as a service. I can list my data in ProductList.js. but I can't call the same data in ProductDetails.js. I'm getting an "undefined" error.

const ProductDetail = (props) => {      const { buttonLabel, className } = props;      const { name, description, price,id } = props;      const axios = require('axios');        const [modal, setModal] = useState(false);        const toggle = () => setModal(!modal);      const [dress, setDress] = useState([]);      useEffect(() => {          axios              .get(`https://5fd9d76f6cf2e7001737ead3.mockapi.io/api/v1/dress`)              .then(function (response) {                  setDress(response.data);              })              .catch(function (error) {                  console.log(error);              });      }, []);      const data = dress.map(item => {          return {                  name: item.name,              description: item.description,              price:item.price,              id: item.id                 }      })          return (              <div >                  <ProductDetailButton onClick={toggle}>Detay{buttonLabel}</ProductDetailButton>                  <Modal isOpen={modal} toggle={toggle} key={`${data.id}`} className={className}>                      <ModalHeader toggle={toggle}>{`${data.name}`}</ModalHeader>                      <ModalBody >                      {`${data.price}`}                      </ModalBody>                      <ModalBody>                      {`${data.description}`}                      </ModalBody>                      <ModalFooter>                          <Button color="secondary" onClick={toggle}>                              Kapat                          </Button>                      </ModalFooter>                  </Modal>              </div>          );  

Modal is displayed as output. It says "undefined" instead of data. How to fix it?

https://stackoverflow.com/questions/65376970/undefined-problem-when-receiving-data-from-api December 20, 2020 at 12:41PM