How to change attribute of a child component from parent in React? - reactjs

Question

I'm having a Child Component with img & h5 elements.I want to change the image and heading content in each component without rewriting the whole code of it.
Parent Component
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Child from "./services";
const Navbar = () => {
return (
<div className="d-flex flex-row justify-content-center">
<Child/>
<Child/>
<Child/>
<Child/>
</div>
);
};
export default Navbar;
Child component:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
const Child = (props) => {
return (
<>
<div className="ser-wrapper">
<img src="https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg" id="myImage"/>
<h5>Heading 1</h5>
</div>
</>
)
};
export default Child;
I tried sending images SRC as props but didn't work the way I wanted. I want to get different images and different heading content for each component.

Answer 1

Parent component
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Child from "./services";
const Navbar = () => {
return (
<div className="d-flex flex-row justify-content-center">
<Child heading="Heading 1" imgSrc="https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg" />
<Child heading="Heading 2" imgSrc="https://media.istockphoto.com/photos/coahuilan-box-turtle-picture-id93385233?k=20&m=93385233&s=612x612&w=0&h=7pdWzLGa-XzIdvPvUsXzF91RomisLiGPiDnlr3iP00A=" />
// ...etc
</div>
);
};
export default Navbar;
Child component
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
const Child = (props) => {
return (
<>
<div className="ser-wrapper">
<img src={props.imgSrc} id="myImage"/>
<h5>{props.heading}</h5>
</div>
</>
)
};
export default Child;

Answer 2

you will need to pass props to the child component from parent component
Parent Component
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Child from "./services";
const Navbar = () => {
return (
<div className="d-flex flex-row justify-content-center">
<Child title="Heading 1" imgSrc="img-url"/>
<Child title="Heading 2" imgSrc="img-url"/>
<Child title="Heading 3" imgSrc="img-url"/>
</div>
);
};
export default Navbar;
Child component:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
const Child = (props) => {
return (
<>
<div className="ser-wrapper">
<img src={props.imgSrc} id="myImage"/>
<h5>{props.title}</h5>
</div>
</>
)
};
export default Child;

Answer 3

There are multiple ways to solve this problem.
You can send array of imgSrc and heading to child component and child component will loop over all these and render all of them like:-
Parent Component
data = [
{
imgSrc:
'https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg',
heading: 'heading1',
},
{
imgSrc:
'https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg',
heading: 'heading2',
},
];
render() {
return (
<div>
<Child data={this.data} />
<p>Start editing to see some magic happen :)</p>
</div>
);
}
}
Child Component
<div>
{data.map((obj) => {
return (
<div className="ser-wrapper">
<img src={obj.imgSrc} id="myImage" />
<h5>{obj.heading}</h5>
</div>
);
})}
</div>
Working Example:- https://stackblitz.com/edit/react-ts-l8ubqc?file=index.tsx
Other way is to use <Child> component multiple times in parent component and pass data as props
Parent Component
<div>
<Child heading='headingName' imgsrc = 'srcurl'/>
<Child heading='headingName' imgsrc = 'srcurl'/>
.
.
</div>
Child Component
const {imgsrc,heading} = props
return (
<>
<div>
<img src={imgsrc} />
<h5>{heading}</h5>
</div>
</>
)