How do I add a button component in ReactJS?

Question

So I'm rendering components from an array 'values': ["hello", "world] successfully but I would like to add a button component so that every time it gets clicked, another empty field shows up. This is what it currently looks like:

but i would like it so that there is a button and every time I click on it, it renders another empty component to input text. Would it be correct to add a button component directly inside the my array_node.jsx file? Is what I'm doing correct so far? Would I also have to add some sort of newInput: function() in side the var AddButton = React.createClass({})? Thank you!

array_node.jsx:

{...
    childChange: function(name, valid, value) {

        // update state
        this.state.values = this.props.values;

        // Using regex to find last digits from 0-9
        var pattern = /[0-9]/;
        var match = name.match(pattern);

        // Parse char into int
        var i = parseInt(match);

        this.state.values[i] = value;
        this.setState(this.state);

        // Call parent callback
        this.props.callback(
            this.props.name,
            this.props.node.valid(this.state.values),
            this.state.values
        );
    },
    addItem: function(values){
    },

        render: function() {
            var that = this;

            return (
                <div id = "form">
                {this.props.values.map(function(v, i) {
                    return (
                        <div>
                        {(that.props.node.get().constructor.name === "Parent") ?
                        <ParentComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            values={v}
                            newParent={that.props.node.get()}
                        />
                        :
                        <NodeComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            value={v}
                            newNode={that.props.node.get()}
                        />
                        }
                        </div>
                    )
                })}
                </div>
           )
        }
    });
    return ArrayNodeComponent


var AddButton = React.createClass({
    addItem: function() {

    },

    render: function() {

        return(
        <div id="create_new_entry">

        </div>
        )
    }
})

formatoc:

var props = {
    'name' : 'form',
    'timer' : 1500,
    'callback' : function(id, validity, value) {console.log(id, validity, value);},
    'values': ["hello", "world"],

    'node' : new FormatOC.ArrayNode({"__array__":"unique", "__type__":"string","__minimum__":1,"__maximum__":200,"__component__":"Input"},
    )
}

React.render(React.createElement(ArrayNodeComponent, props), document.getElementById('react-component'));

Your code seems to be very outdated. Is there a reason you are using React.createClass instead of es6 classes? If you are starting to learn react I can strongly recommend to make use of the es6 syntax. I have literally nobody seen writing react code like this for ages except for some weird project requirements. — trixn
– trixn, Commented May 15, 2018 at 13:30
Absolutely what @trixn said, it seems that you may need to read up on some more modern examples, take a look at the react docs, they are pretty good for getting started reactjs.org/tutorial/tutorial.html — Ben Lonsdale
– Ben Lonsdale, Commented May 15, 2018 at 14:29

Luke · Accepted Answer · 2018-05-15 13:59:03Z

You might add a button into your form within the render function. Then listen to clicks and add a new empty element to your values list.

if you would like to propagate the changes to some parent component, you would have to pass the onClick handler from the parent component and update the values list there too.

import { Component } from 'react';

class ArrayNodeComponent extends Component {

  // other code ...
  // like your initialisation of your state
  // and other functions

  addEmptyItem() {
    const { values } = this.state;
    this.setState({
      values: [...values, ""]
    });
  }

  render() {
    return (
      <form id="test">
        {
          /* this is your values map routine, shortened */
          this.props.values.map(function(v, i) { /*...*/ })
        }
        <button onClick={() => this.addEmptyItem()}>Add</button>
      </form>
    );
  }

}

Btw in this simple scenario, it would not make sense to create a custom Button component.

Collectives™ on Stack Overflow

How do I add a button component in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related