So I'm rendering ponents from an array 'values': ["hello", "world] successfully but I would like to add a button ponent 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 ponent to input text. Would it be correct to add a button ponent 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,"__ponent__":"Input"},
)
}
React.render(React.createElement(ArrayNodeComponent, props), document.getElementById('react-ponent'));
So I'm rendering ponents from an array 'values': ["hello", "world] successfully but I would like to add a button ponent 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 ponent to input text. Would it be correct to add a button ponent 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,"__ponent__":"Input"},
)
}
React.render(React.createElement(ArrayNodeComponent, props), document.getElementById('react-ponent'));
-
1
Your code seems to be very outdated. Is there a reason you are using
React.createClassinstead of es6 classes? If you are starting to learn react I can strongly remend 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 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/tutorial/tutorial.html – Ben Lonsdale Commented May 15, 2018 at 14:29
1 Answer
Reset to default 4You 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 ponent, you would have to pass the onClick handler from the parent ponent 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 ponent.