React render component multiple times in container with different props?

Question

I am trying to create a reusable "tag" React component, so that users can create tags onclick and see that information displayed in the DOM.

Here's the module:

module.exports = React.createClass({
  render: function() {
    return (
      <div className="language chip" data-lang={this.props.language} data-lang-level={this.props.level}>
        {this.props.language} ({this.props.level})
        <i className="material-icons">close</i>
      </div>
    );
  }
});

And the onclick call:

var addLanguage = $('a#add-language');
addLanguage.click(function() {
  var languageLearning = $('#language-learning');
  var levelLearning =  $('#language-level');

  if (languageLearning != null && levelLearning != null) {

    ReactDOM.render(
      <LanguageChip
        language={languageLearning.val()}
        level={levelLearning.val()}
      />,
      document.getElementById('language-chips')
    );

    languageLearning.select2('val', '');
    levelLearning.select2('val', '');

  }
})

I didn't realise that when using React.DOM, "Any existing DOM elements inside are replaced when first called." This means when adding a second chip, the first is removed. I want users to be able to have multiple chips.

How can I do this?

Snahedis · Accepted Answer · 2016-01-20 13:27:30Z

1

I don't know if you've got a good reason to not add the form used to create a tag on your component, but it would be much simpler if you could. Then you just have to add your tags on an array and display them with your LanguageChip component.

I've made an example here: https://jsfiddle.net/snahedis/69z2wepo/28193/

I don't know what's your level of understanding of React so if something isn't clear let me know :)

Edit: the same example inside a preexistent form: https://jsfiddle.net/snahedis/69z2wepo/28217/

edited Jan 20, 2016 at 13:27

answered Jan 20, 2016 at 11:30

Snahedis

2311 silver badge6 bronze badges

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

3 Comments

j_d Over a year ago

Thanks, this is great! I don't want to do it via a form though, because the area I'm using this is actually already inside a form, so I'm getting nested form problems. Any advice to do this outside of a form?

Snahedis Over a year ago

I've edited my answer. You just have to use the click event of the button instead of the submit event of the form. But if it's inside a form I guess you'll want to submit the tags with the form no ?

j_d Over a year ago

Yes, I need to submit the tags, but via JSON with a very particular structure so don't worry. Thanks!

Anastasia Abakumova · Accepted Answer · 2016-01-20 11:35:42Z

You need to use array to store multiple chips data. Take a look to this simplified example: http://output.jsbin.com/seficu

var LanguageChips = React.createClass({
  render: function() {
    return (
      <div>
        {    
          (this.props.chipsArray).map(function(chip, index) {
            return <LanguageChip
              key={index}
              language={chip.languageLearning}
              level={chip.levelLearning}
            />
          })
        }
      </div>
    );
  }
});

var LanguageChip = React.createClass({
  render: function() {
    return (
      <div className="language chip" data-lang={this.props.language} data-lang-level={this.props.level}>
        {this.props.language} ({this.props.level})
        <i className="material-icons"></i>
      </div>
    );
  }
});

var chipsArray = [];

document.getElementById('add-language').addEventListener("click", function() {
  var languageLearning = 'test1';
  var levelLearning = 'test2';
  if (languageLearning != null && levelLearning != null) {
    chipsArray.push({
      languageLearning: languageLearning,
      levelLearning: levelLearning
    });

    ReactDOM.render(
      <LanguageChips chipsArray={chipsArray} />,
      document.getElementById('language-chips')
    );
  }
})

Collectives™ on Stack Overflow

React render component multiple times in container with different props?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related