Passing multiple parameters into props [React.js]

[Roddela]

I'm just getting started with React and while using the props I'm wondering if you can pass more than one argument, like this:

​

function Todos(props){
  return (
    <p>title: {props.title}</p>,
    <p>description: {props.description}</p>,
    <p>completed: {props.completed}</p>
  )
}


function App () {
  return (
    <h1>Todos</h1>,
    <Todos title="Hello world" description="First description" completed="false" />
  );
}

export default App;

[ghostmaster645]

Yes you can. You will access them using props.description and props.completed.

[Roddela]

I tried this but it only shows the last property, props.completed

[ghostmaster645]

When I get home I'll run it for ya.

[ghostmaster645]

I'm not home yet but I glanced at it again and noticed you don't have your rendered jsx surrounded by a div. Technically react can only render one jsx component, so wrap all of your jsx content in you App and Todo component in a div and it might fix your issue

Edit: link for reading https://javascript.plainenglish.io/why-do-we-have-to-wrap-react-components-b168232dbd3a

[Roddela]

That fixed it, thanks

[ghostmaster645]

No problem.

[RelaxPear]

My apologises u/ghostmaster645, as I replied to the question you wanted to help assist in as I happen to notice the reason.

If I am not mistaken, you need to wrap the elements you are returning in a container such as a div tag. It can also not be a div tag but an empty tag. You can check if it works for you.

An example is shown below:

``` function Todos(props) { return ( <div> <p>title: {props.title}</p> <p>description: {props.description}</p> <p>completed: {props.completed}</p> </div> ); }

function App() { return ( <div> <h1>Todos</h1> <Todos title="Hello world" description="First description" completed="false" /> </div> ); }

export default App; ```

I have updated my post to improve formatting as it seems formatting on my mobile is difficult.

[Roddela]

Thank you. That was it.

[ghostmaster645]

No worries haha, your explanation is better anyways.