React: Passing Props not working. What am I missing?

0
votes

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?

3
javascriptreactjsdataflow
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
@DhruviMakvana thanks for the answer. but same problem. nothing is shown? – M Hot

3 Answers

2
votes

Licence component 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;
1
votes

update your App component:

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

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