passing arguments into React components

Question

I am trying to pass the following:

 className={'follow-btn ${followClass}'} onClick={this.toggleFollow.bind(this)}

into the component:

 <Button style="default" size="small" fill="fill">Follow</Button>

The actual component code:

<button className={classnames('button', this.props.classes, this.props.action, this.props.text, this.props.size, this.props.style, this.props.fill)}>{this.props.children}</button>

I could not figure out how to accept the arguments as it is into the component but it does not seem to work. Any ideas?

Thanks

I am using the 'classnames' module to pass in multiple classnames. — hilarl
– hilarl, Commented Aug 30, 2015 at 11:46
and what is className={'follow-btn ${followClass}'} onClick={this.toggleFollow.bind(this)} if you are trying to pass classnames('button', this.props.classes, this.props.action, this.props.text, this.props.size, this.props.style, this.props.fill) ? I have the feeling the answer is simple but I don't understand the context — François Richard
– François Richard, Commented Aug 30, 2015 at 11:54

Dimitar Dimitrov · Accepted Answer · 2015-08-30 11:54:26Z

4

Alright so I'm, not entirely sure what the confusion is, but I'll try to illustrate with an example. As far as I understood, you want to pass some css class names to a React component, here is how that would look like:

class MyAwesomeButton extends React.Control {
    render() {
        var classes = classNames("button", this.props.customClasses);
        return (
            <button classNames={classes}>
                {this.props.text}
            </button>
        );
    }
}

Then you use it like this:

<MyAwesomeButton customClasses="something something-else" text="Click Me!" />

I hope I didn't misunderstand you.

answered Aug 30, 2015 at 11:54

Dimitar Dimitrov

15.2k9 gold badges55 silver badges82 bronze badges

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

1 Comment

hilarl Over a year ago

Thanks for the input Dimitar, I am trying to pass in the following: {'follow-btn ${followClass}'}

tysik · Accepted Answer · 2024-01-25 15:27:25Z

0

Now, you can do like this:

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
    return (
        <img
            className="avatar"
            src={getImageUrl(person)}
            alt={person.name}
            width={size}
            height={size}
        />
    );
}

export default function Profile() {
    return (
        <div>
            <Avatar
                size={100}
                person={{
                    name: 'Katsuko Saruhashi',
                    imageId: 'YfeOqp2',
                }}
            />
        </div>
    );
}

answered Jan 25, 2024 at 15:27

tysik

275 bronze badges

Collectives™ on Stack Overflow

passing arguments into React components

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related