Devtools - insert components in components
Mon Jun 19 2023 13:23:18 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
--------------------- App page -----------------------
function App(){
return (
<div>
<Header />
<Note
title = "The first note"
detail = "note Detail"
img = {NoteList[0].img}
/>
<Note
title = {NoteList[1].title}
detail = {NoteList[1].detail}
img = {NoteList[1].img}
/>
<Note
title = {NoteList[2].title}
detail = {NoteList[2].detail}
img = {NoteList[2].img}
/>
<Footer />
</div>
)
}
----------------- Note page ----------------------
function Note(props){
return (
<div className="note">
<Detail info={props.title}/>
<Detail info={props.detail}/>
<Avatar img={props.img} />
</div>
)
}
--------------------- Avatar Page ----------------
function Avatar(props) {
return <img className="circle-img" src={props.img} alt="avatar_img" />;
}
--------------------Details page -------------------
function Detail(props) {
return <p>{props.info}</p>;
}
content_copyCOPY
The components can be devived in different small components where you can add the props from the app page where originally you can all the information. then you can bring one single component as Avatar and you can add it anywhere you wnat.
Comments