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

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;

enter image description here

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.

CodePudding user response：

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;

CodePudding user response：

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;

CodePudding user response：

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>
        </>
      )