How to inject a list of attributes as a string in ReactJS

Question

I am writing a React component that makes my text editable. When clicked, it renders an input, when blurred it renders a text like before.

To make it work, I have to put a lot of attributes in my elements. I want to handle many types of inputs (text, number, date, textarea, ...) and I don't want to repeat this list all along.

Is there a way of writing this list only once and inject it in my elements?

Something like this:

const options = "value={this.props.value} placeholder={this.props.placeholder} onChange={this.props.onChange}  onBlur={this.stopEdit} ref={(e) => {this.eRef = e;}}";

Later used like that:

render() {
    return (<input type="text" {{options}} />);
}

I have read about dangerouslySetInnerHTML but that's not doing what I need.

Many thanks for your help!

Giang Le · Accepted Answer · 2018-03-04 15:55:20Z

2

Why you dont use like this

const options = {
  value: this.props.value,
  placeholder: this.props.placeholder,
  ...
}

and html = <input type="text" {...options}/>

or you can use

html = React.createElement('input', {type: 'text', ...options})

answered Mar 4, 2018 at 15:55

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

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

1 Comment

Giang Le Over a year ago

I'm glad to help you.

baeyun · Accepted Answer · 2018-03-04 15:51:34Z

0

If you're looking on how to make text in your element editable, perhaps attach the content-editable="true" attribute to the element.

Hope this helps!

answered Mar 4, 2018 at 15:51

baeyun

2281 silver badge6 bronze badges

1 Comment

RaphaMex Over a year ago

That's useful, thanks. But I want to control how it is edited so I stick to my homemade component :)

Collectives™ on Stack Overflow

How to inject a list of attributes as a string in ReactJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related