React：スプレッドオペレータを使って小道具を深く入れ子にする

Question

深く入れ子になった子どもたちに小道具を渡すためのきれいな方法を見つけようとしています。しかし、エラーExpected an assignment or function call and instead saw an expressionが発生しています。私はそれが何か単純で馬鹿だとはかなり確信していますが、理解できないようです。私のコードは以下の通りです：

class App2 extends React.Component { 
    state= { 
    prop1: 1, 
    prop2: 2, 
    prop3: 3 
    } 

    render() { 
    return <ParentComponent {...this.state} /> 
    } 
} 



const ParentComponent = (props) => { 
    <div> 
    <h1>Parent Component</h1> 
    <ChildComponent {...props} /> 
    </div> 
}; 

const ChildComponent = ({prop1, ...rest}) =>{ 
    <div> 
    <h1>Child Component with prop1={prop1}</h1> 
    <GrandChildComponent {...rest} /> 
    </div> 
}; 

const GrandChildComponent = ({prop2, prop3})=> { 
    <div> 
    <h1>Grand Child Component with prop2={prop2} and prop3={prop3}</h1> 
    </div> 
}; 

Answer 1

の代わりに{}を使用しました:)

class App2 extends React.Component { 
    state= { 
    prop1: 1, 
    prop2: 2, 
    prop3: 3 
    } 

    render() { 
    return <ParentComponent {...this.state} /> 
    } 
} 



const ParentComponent = (props) => (
    <div> 
    <h1>Parent Component</h1> 
    <ChildComponent {...props} /> 
    </div> 
); 

const ChildComponent = ({prop1, ...rest}) =>(
    <div> 
    <h1>Child Component with prop1={prop1}</h1> 
    <GrandChildComponent {...rest} /> 
    </div> 
); 

const GrandChildComponent = ({prop2, prop3})=> (
    <div> 
    <h1>Grand Child Component with prop2={prop2} and prop3={prop3}</h1> 
    </div> 
);