Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (retired) Thinking in Components Properties

Posted by Osama Awan
Osama Awan
Courses Plus Student 8,676 Points

How to pass more than one argument in components function

What if i want to pass more than one argument components function like this

function Anything(props, myprops) { return( <h1>{props.title}</h1> <p>{myprops.desc}</p> ); } ReactDOM.render(<Anything title="Hi" desc="Hola" />, document.getElementById("app");

The above code takes only the first argument not the second one

2 Answers

Tata Gelashvili
Tata Gelashvili
3,076 Points
Tata Gelashvili
Tata Gelashvili
3,076 Points

Of course you can use multiple properties. Like this:

class App extends React.Component {
  render () {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <h2>{this.props.description}</h2>
      </div>
    );
  }
}

ReactDOM.render(
  document.getElementById('container'),
  <App title="Awesome App" description="This is my first Awesome app" />
);
Gonzalo Blasco
Gonzalo Blasco
10,405 Points
Gonzalo Blasco
Gonzalo Blasco
10,405 Points

You can also use props as an object...

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Example taken from React Documentation https://reactjs.org/docs/components-and-props.html