CODEWITHSUNDEEP
javascriptreactjsreact-props
Kevin
Kevin

Reputation: 75

How come props doesn't show when I try to print in react

I am trying to transfer a simple class to print but it isn't working.

When I check console.log get something like: Object { "$$typeof": Symbol(react.element), type: Category(), key: null, ref: null, props: {…}, _owner: {…}, _store: {…}, … }

This is my current return on the App class as a test:

return (
  <div>
    <Category category = {<Category categoryId={123} categoryName="Hohnny" />} />
  </div>
);

And this is my category class: 

import React from "react";

class Category extends React.Component {
  render() {
    console.log(this.props.category);
    return (
        <div>
            {this.props.categoryId}
        </div>
    ); // end return
  }
}

export default Category;

What am I doing wrong?

Upvotes: 2

Views: 591

Answers (2)

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

You are sending prop in wrong way. Sending props in react is like calling a component and passing properties to it but not like passing a component to the component and expecting properties to be available.

This is how you have to call a component and pass properties to it

return (
     <div>
      <Category categoryId={123} categoryName="Hohnny" />
  </div>
)

Edit:

If you want to pass a component as prop then that can be passed like 

<Category categoryId={123} categoryName="Hohnny" category={<SomeOtherComponent />}/>

Upvotes: 4

Michal
Michal

Reputation: 5220

This is what is printed in console.log:

category = {<Category categoryId={123} categoryName="Hohnny" />}

You are basically passing the whole component as a prop. That is not the right way to do that. Simple example:

<MyComponent />

You want to pass props:

{
  someString: 'my string',
  someInt: 42,
  boolenTrue: true,
  booleanFalse: false,
}

What you want to do:

<MyComponent someString="my string" someInt={42} boolenTrue booleanFalse={false} />

Your code should look like this:

return (
  <div>
    <Category categoryId={123} categoryName="Hohnny" />
  </div>
)

Upvotes: 0

Related Questions