vendredi 30 octobre 2020

How to write react child component to decide what to render in parent without redirecting

Simpler version of my code is as below, I would like the child component to held responsible for rendering "this page is not found", redirecting from the child component is not what I am looking for. We re-use this child component and adding the check every where is not the correct solution.

const parentComponent = (props) => {

    if(!props.hasImage)
       return <div> this page is not found </div>

       return (
         <div>
           <h1> Header with Image </h1>
           <childComp image={props.image}>  Child component 2 </childComp>
           <div> Footer with Image <div>
         </div>
)}

const childComp = (props) => <div> {props.image} {props.children} </div>

Aucun commentaire:

Enregistrer un commentaire