as you may get from the title, passing props in react is not working. And i don´t get why.

Main Ap Component

import './App.css';
import Licence from './Licence';

function App() {
  return (
    <>
    <Licence>
      test={"Test123"}
    </Licence>
    </>
  );
}
export default App;

Other Component

import React from 'react';


const Licence = (props) => {
    return (
    <div>
        <h1>name : {props.test}</h1>
    </div>
    )
}

export default Licence;

Problem if i start the script and render the page, nothing is shown. What am I doing wrong?

as you may get from the title, passing props in react is not working. And i don´t get why.

Main Ap Component

import './App.css';
import Licence from './Licence';

function App() {
  return (
    <>
    <Licence>
      test={"Test123"}
    </Licence>
    </>
  );
}
export default App;

Other Component

import React from 'react';


const Licence = (props) => {
    return (
    <div>
        <h1>name : {props.test}</h1>
    </div>
    )
}

export default Licence;

Problem if i start the script and render the page, nothing is shown. What am I doing wrong?

• javascript
• reactjs
• dataflow

• when you do test={"Test123"} you are trying to pass an object. Please replace it with test="Test123". It should resolve your issue. – Dhruvi Makvana Commented Dec 2, 2020 at 17:24
• @DhruviMakvana thanks for the answer. but same problem. nothing is shown? – M Hot Commented Dec 2, 2020 at 17:26

3 Answers 3

Licence ponent looks good to me!

All you have to do is change up how you set it up on App. Props need to be passed on the tag, like this:

import './App.css';
import Licence from './Licence';

function App() {
  return (
    <>
    <Licence test={"Test123"} />
    </>
  );
}
export default App;

update your App ponent:

```
<Licence
  test={"Test123"} />
```

Pass like this

<Licence test={"Test123"} />

and access like this

const Licence = (props) => {
    return (
    <div>
        <h1>name : {props.test}</h1>
    </div>
    )
}

Another way

<Licence>
     Test123
 </Licence>

access like this

const Licence = (props) => {
    return (
    <div>
        <h1>name : {props.children}</h1>
    </div>
    )
}