선생님 Card 만들기 숙제에서 질문있습니다.

[이민형]

Bootstrap에서 레이아웃 따와서 숙제 진행했는데 props로 잘 보내서
이론상으로 돌아가야 하는 코드인 것 같은데 레이아웃 박스가 안보입니다.
map이랑 props 안쓰고 App함수에다가 일일이 넣을때는 올바르게 동작했었습니다.
강의 잘 듣고 있습니다. 감사합니다.
 

import { Navbar, Container, Nav, Row, Col } from 'react-bootstrap';
import './App.css';
import bg from './img/bg.png';
import data from './data';
import React, { useState } from "react";

function App() {

  let [shoes, setShoes] = useState(data);

  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Minhyung-SHOP</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Menu</Nav.Link>
            <Nav.Link href="#pricing">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <div className='main-bg' style={{ backgroundImage: 'url(' + bg + ')' }}></div>
      <Container>
        <Row>
          {
            shoes.map(function (key, index) {
              return (
                <ItemBox shoes={ shoes[index] } i={index + 1} />
              )
            })
          }
        </Row>
      </Container>
    </div>
  );
}

function ItemBox(props) {
  <Col sm>
    < img src={'https://codingapple1.github.io/shop/shoes' + props.i + '.jpg'} width={'80%'}/>
    <h4>{props.shoes.title}</h4>
    <p>{props.shoes.price}</p>
  </Col>
}

export default App;

[codingapple]

크롬콘솔창엔 에러같은거 안뜨나 확인해봅시다

[이민형]

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.
크롬콘솔창에 위에 같은 경고가 뜨긴 합니다. ㅜㅜ

[이민형]

함수에 리턴을 안써줬었네요.... 해결했습니다!

[글쓴이]

글