ReactJS how to pass child component title from parent component

Question

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;

Does this answer your question? [React: Passing down props to functional components](https://stackoverflow.com/questions/39963565/react-passing-down-props-to-functional-components) — mahooresorkh, Mar 25 '22 at 07:44

score 2 · Accepted Answer · edited Mar 25 '22 at 08:44

2

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;

edited Mar 25 '22 at 08:44

mgm793

1,968
15
23

answered Mar 25 '22 at 07:40

Kostas Minaidis

4,681
3
17
25

score 1 · Answer 2 · edited Mar 25 '22 at 07:49

1

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;

edited Mar 25 '22 at 07:49

Nice18

476
2
12

answered Mar 25 '22 at 07:40

mgm793

1,968
15
23

ReactJS how to pass child component title from parent component

{ props.title }

2 Answers2