Setting state from child components

Star image 부분을 따로 component로 만들어 분리하고
Onclick이 되게 만들어보는 연습..

Star.js

import React from "react"

export default function Star(props) {
    const starIcon = props.isFilled ? "star-filled.png" : "star-empty.png"
    return (
        <img 
            src={`../images/${starIcon}`} 
            className="card--favorite"
            onClick={props.handleClick}
        />
    )
}

props 써주고 return에 저 부분까지 옮기는거까지는 했는데

const starIcon = props.isFilled ? "star-filled.png" : "star-empty.png"

이 부분 하는걸 놓침... 그리고 첫번째부분을 props.isFiled라고
설정해주는것도 혼자 못했음 :(

App.js

import React from "react"
import Star from "./Star"

export default function App() {
    const [contact, setContact] = React.useState({
        firstName: "John",
        lastName: "Doe",
        phone: "+1 (719) 555-1212",
        email: "itsmyrealname@example.com",
        isFavorite: true
    })
    
    function toggleFavorite() {
        setContact(prevContact => ({
            ...prevContact,
            isFavorite: !prevContact.isFavorite
        }))
    }
    
    return (
        <main>
            <article className="card">
                <img src="./images/user.png" className="card--image" />
                <div className="card--info">
                    <Star isFilled={contact.isFavorite} handleClick={toggleFavorite} />
                    <h2 className="card--name">
                        {contact.firstName} {contact.lastName}
                    </h2>
                    <p className="card--contact">{contact.phone}</p>
                    <p className="card--contact">{contact.email}</p>
                </div>
                
            </article>
        </main>
    )
}

위의 코드에서 바로 이부분

<Star isFilled={contact.isFavorite} handleClick={toggleFavorite} />

혼자 칠수가 없었음..휴 아직 props에 대한 공부를 더 깊게 해야하나봄ㅠㅠ
코드 보면 이해는 가는데 혼자 해보려고 하면 못치겠음ㅠ
참고로 eventlistener 살펴보면 여기서는 Star.js에 star가 있기
때문에 App.js에서는 저렇게 handleClick으로 설정해주고
Star.js에서는 원래와 같이 onClick으로 설정해주면 됨.

 onClick={props.handleClick}

props로 가져오기때문에 props.handleClick