Question

0

155

Views

ReactJS how to pass child component title from parent component

I am using a slick carousel component to display products for different pages, so I need to set its title from parent component: something like <Component title="Products" />

Here is the basic structure of my jsx files, can we do it with a simple method like below?

Parent.jsx:

const Parent = () => {
  return (
    <Component title="Products" />
  );
}

export default Parent;

Component.jsx:

const Component = () => {
  return (
    <h3>
      {title}
    </h3>
  );
}

export default Component;

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

You need to access the title parameter like this

Destructured parameter

const Component = ({title}) => {
  return (
    <h3>
      {title}
    </h3>
  );
}

export default Component;

or like this

props parameter

const Component = (props) => {
  return (
    <h3>
      {props.title}
    </h3>
  );
}

export default Component;

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T05:49:33.172Z

You can pass data from a parent Component to a Child via the props:

const Parent = () => {
  return (
    <Component title="Products" />
  );
}

export default Parent;

Component.jsx:

const Component = ( props ) => {
  return (
    <h3>
      {props.title}
    </h3>
  );
}

export default Component;

0

155

ReactJS how to pass child component title from parent component

2 answers

0

0

Find remote jobs

Andres GPT