Reactjs. Cannot pass variable to class

Question

I m totally new to React. I am trying to pass a variable 'name' to my class, but it is not getting assigned. These names comes from another file. I cannot see names of people on my buttons. Before my Card was just a simple function and it was working fine. But after converting it into a class, name is not working. Pls help!

BEFORE (Working):

const Card = ({name, email}) => {

return  (

        <div>
            <h2 className='f5'>{name}</h2>
            <p className='f6'>{email}</p>
        </div>

    </div>
);
}

AFTER (Not Working):

class Card extends Component { 
    constructor({props, name}) {
        super(props);
        this.state = { 
            isToggleOn: true,
            name: this.name
        };

        this.handleClick = this.handleClick.bind(this);
 }

handleClick() {
    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
    }));
} 
render() {
    var { name } = this.state;
    return (
        <button onClick={this.handleClick}>
            { this.state.isToggleOn ? name : 'OFF' }
        </button>
    );  
    }
} 

ReactDOM.render(
  <Card />,
  document.getElementById('root')
);
export default Card;

@AkshayAggarwal That other file: import React from 'react'; import Card from './Card'; const CardList = ({users}) => { return ( <div> { users.map((user, i) => { return <Card key={users[i].id} id={users[i].id} name={users[i].name} email={users[i].email} /> }) } </div> ); } export default CardList; — JKhan
– JKhan, Commented Apr 5, 2018 at 8:48

CristianCurteanu · Accepted Answer · 2018-04-05 08:40:34Z

1

First, I think you should change this piece of code:

this.state = { 
    isToggleOn: true,
    name: this.name
};

to this:

this.state = {
    isToggleOn: true,
    name:       name || ''
};

as you want to use the value of parameter.

Second, I don't think this is a root component, so most probably you should use it inside other component, which means that this piece of code:

ReactDOM.render(
  <Card />,
  document.getElementById('root')
);

is redundant, so you will need to remove it from current file.

And last, when you will use the Card component in another component, you should give it name property, something like:

<Card name="Some String" />

answered Apr 5, 2018 at 8:40

CristianCurteanu

464 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JKhan Over a year ago

I am getting: Unexpected use of 'name' no-restricted-globals

JKhan Over a year ago

It works now! I forgot to pass name in constructor. Ty =)

Bogdan M. · Accepted Answer · 2018-04-05 09:27:20Z

0

The variable name should be passed by the special parameter props. All varaibles coming from outside the compnent are passed via props.

ReactDOM.render(
  <Card name="Some name"/>,
  document.getElementById('root')
);

Then in the constructor:

constructor(props) { // NOTE that only props gets passed to to constructor
     super(props)
     this.state = { 
        isToggleOn: true,
        name: props.name
};

This way you can set the state values in constructor, having the variable from outside.

I recommend you strongly to check out the official tutorial: https://reactjs.org/docs/introducing-jsx.html

edited Apr 5, 2018 at 9:27

answered Apr 5, 2018 at 8:15

Bogdan M.

2,1817 gold badges31 silver badges56 bronze badges

3 Comments

JKhan Over a year ago

Now I am getting: Unexpected use of 'name' no-restricted-globals

evolutionxbox Over a year ago

Your example uses an undefined name variable.

Bogdan M. Over a year ago

Updated the example @TedKhi

Collectives™ on Stack Overflow

Reactjs. Cannot pass variable to class

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related