Develop Reference

how to change both input type and max value in react input tag during onfocus?

i have an input tag .by default it will have type as text but during onfocus type should be changed to date and max should be changed to current date. initially i'm using input type as text since i want an placeholder which says 'Select start date'. i'm building an React application. how to do this?

var Foo = React.createClass({
getInitialState: function () {
return {
type: 'text',
max: false
};
},
onFocus: function () {
this.setState({
type: 'date',
max: new Date().toISOString().split("T")[0]
});
},
onBlur: function () {
this.setState({
type: 'text',
max: false
});
},
render: function () {
return(
<input
type={ this.state.type }
max={ this.state.max }
onFocus={ this.onFocus }
onBlur={ this.onBlur }
placeholder="Enter your date here."
/>
)
}
});
React.render(<Foo/>, document.body);

In plain JS you could just do somthing like this (shoutouts to TRiNE for originally posting the today's-date-code):
const input = document.getElementById('myInput')
input.addEventListener('focus', changeToDateType)
function changeToDateType(){
input.type = "date"
input.max = new Date().toISOString().split("T")[0]
}
<input id="myInput" placeholder="Enter date here...">

var Foo = React.createClass({
getInitialState: function () {
return {
type: 'text'
};
},
onFocus: function () {
this.setState({
type: 'date'
});
},
onBlur: function () {
this.setState({
type: 'text'
});
},
render: function () {
return(
<input
type={ this.state.type }
onFocus={ this.onFocus }
onBlur={ this.onBlur }
placeholder="Enter your date here."
/>
)
}
});
React.render(<Foo/>, document.body);

dynamic setState to add new dynamic property in react

I have this scenario where I have to add multiple and dynamic property to an array of object. Says it's lang = ['en', 'fr', 'more'], how can I produce a object structure like this
Below is my failed attempt:
class App extends React.Component {
state = {
lang: ["en", "fr"],
items: [
{
id: 1,
value: {
en: "abc",
fr: "hello"
}
}
]
};
onChange = (e, i) => {
this.setState({
items: this.state.items.map(o => ({
...o,
value: {
[this.state.lang[i]]: e.target.value //need fix
}
}))
});
};
render() {
return (
<div className="App">
{this.state.lang.map((o, index) => (
<div>
<input
onChange={e => this.onChange(e, index)}
placeholder={o}
type="text"
/>
<br />
</div>
))}
<br />
<pre>{JSON.stringify(this.state, null, 2)}</pre>
</div>
);
}
}
https://codesandbox.io/s/p746jn313q

If I understood what you're trying to do correctly, you just needed to spread the value object inside of your map:
onChange = (e, i) => {
this.setState({
items: this.state.items.map(o => ({
...o,
value: {
...o.value, // <- this
[this.state.lang[i]]: e.target.value
}
}))
});
};
I've also edited the codesandbox: https://codesandbox.io/s/13vo5rrjwj

button not working in React

I cannot figure out why my handleDelete function isn't running. When I click 'Delete' nothing at all happens.
In dev tools I see the value for the delete button is correct but onClick with it's attributes doesn't show up at all.
var MainContainer = React.createClass({
getInitialState: function(){
return {
name: 'JK_MNO',
friends: [], //friends is items
text: ''
}
},
handleChange: function(e){
//like the onChange function
this.setState({
text: e.target.value
});
},
handleSubmit: function(e){
e.preventDefault();
if(this.state.text !== '') {
var nextfriend = this.state.friends.concat([{
text: this.state.text, id: Date.now()
}]);
var nextText = '';
this.setState({
friends: nextfriend, text: nextText
});
}
},
handleDelete: function(e){
console.log(this.state.friends);
this.friends.splice (this.props.friend.id);
this.setState({
friends: friends
});
},
render: function(){
return (
<div>
<h3> Name: {this.state.name} </h3>
<ShowList friends={this.state.friends} />
<form onSubmit={this.handleSubmit} >
Enter Friends: <input className="friendInput" onChange={this.handleChange} value={this.state.text} />
</form>
</div>
);
}
});
var ShowList = React.createClass({
render: function() {
var createFriend = function(friend) {
return (
<li key={friend.id}>{friend.text} <button onClick={this.props.handleDelete} value={friend.id}>Delete</button> </li>
);
};
return <ul>{this.props.friends.map(createFriend.bind(this))}</ul>;
}
});
ReactDOM.render(<MainContainer />, document.getElementById('container'));
https://jsfiddle.net/USERALPHA32/bdc9trux/

Very close! You just need to pass your delete function down to ShowList as a prop:
Current:
<ShowList friends={this.state.friends} />
Suggested:
<ShowList friends={this.state.friends} handleDelete={this.handleDelete} />

React radio input not checking

I have a simple form which has a couple of radio buttons that aren't checking. Each button has a change event attached, but still nothing changes. What can I do to not only capture their data, but signify that the input is selected?
The form
FormComponent = React.createClass({
propTypes: {
label: React.PropTypes.string,
onChange: React.PropTypes.func
},
handleEvent(e) {
let {onChange} = this.props;
console.log(e);
},
render() {
const {label} = this.props;
return (
<form className="lm-widget__form lm-flex-row">
<fieldset className="lm-flex-row__column lm-h-flex-50">
<RadioSet group='radio-group'
label={label}
radios={[
{
value: 'new',
checked: true,
changeEvent: this.handleEvent,
text: 'radio one'
},
{
value: 'old',
checked: false,
changeEvent: this.handleEvent,
text: 'radio two'
}
]}
/>
</fieldset>
</form>
)
}
});
The radio buttons
RadioSet = React.createClass({
propTypes: {
group: React.PropTypes.string.isRequired,
label: React.PropTypes.string,
radios: React.PropTypes.arrayOf(
React.PropTypes.shape({
value: React.PropTypes.string.isRequired,
checked: React.PropTypes.bool.isRequired,
changeEvent: React.PropTypes.func.isRequired,
text: React.PropTypes.string.isRequired
})
).isRequired
},
render: function () {
const {group, label, radios} = this.props;
const self = this;
if (label) {
return(
<div className="lm-widget-form__label">
<div className="small">{label}</div>
<div className="segment-controls">
{radios.map(function(radio, i){
return (
<div key={i} className="segment-controls__group-item">
<input type="radio"
name={self.props.group}
className="segment-controls__button"
id={`radio-${i}`}
value={radio.value}
checked={radio.checked}
onChange={radio.changeEvent}
/>
<label htmlFor={`radio-${i}`}
className="segment-controls__label">
<span className="segment-controls__label-text">
{radio.text}
</span>
</label>
</div>
);
})
}
</div>
</div>
)
}
else {
return (
<div className="segment-controls">
{this.props.radios.map(function(radio, i){
return (
<div key={radio.value} className="segment-controls__group-item">
<input type="radio"
name={self.props.group}
className="segment-controls__button"
id={`radio-${i}`}
value={radio.value}
checked={radio.checked}
onChange={radio.changeEvent}
/>
<label htmlFor={`radio-${i}`}
className="segment-controls__label">
<span className="segment-controls__label-text">
{radio.text}
</span>
</label>
</div>
);
})
}
</div>
);
}
}
});

So the issue is that you're telling the first radio button it's checked every time by passing true to it.
If we change your first bit of code to use setState this should work.
FormComponent = React.createClass({
getInitialState() {
return {
checkedIndex: 0
};
},
propTypes: {
label: React.PropTypes.string,
onChange: React.PropTypes.func
},
handleEvent(index, e) {
this.setState({
checkedIndex: index
});
let {onChange} = this.props;
console.log(e);
},
render() {
const {label} = this.props;
const radios = [
{
value: 'new',
checked: false,
changeEvent: this.handleEvent.bind(this, 0),
text: 'radio one'
},
{
value: 'old',
checked: false,
changeEvent: this.handleEvent.bind(this, 1),
text: 'radio two'
}
];
radios[this.state.checkedIndex].checked = true;
return (
<form className="lm-widget__form lm-flex-row">
<fieldset className="lm-flex-row__column lm-h-flex-50">
<RadioSet group='radio-group'
label={label}
radios={radios}
/>
</fieldset>
</form>
)
}
});
Also note we are using bind to maintain the this context of handleEvent and to pass in the proper index.

how to remove an item from a list with a click event in ReactJS?

var FilterList = React.createClass({
remove: function(item){
this.props.items = this.props.items.filter(function(itm){
return item.id !== itm.id;
});
return false;
},
render: function() {
var createItem = function(item) {
return (
<li>
<span>{item}</span>
<a href data-id="{item.id}" class="remove-filter" onClick={this.remove.bind(item)}>remove</a>
</li>
);
};
return <ul>{this.props.items.map(createItem.bind(this))}</ul>;
}
});
var FilterApp = React.createClass({
getInitialState: function() {
return {items: [], item: {
id: 0,
type: null
}};
},
onChangeType: function(e){
this.setState({
item: {
id: this.state.items[this.state.items.length],
type: e.target.value
}
});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.item]);
var item = {};
this.setState({items: nextItems, item: {}});
},
render: function() {
return (
<div>
<h3>Filters</h3>
<FilterList items={this.state.items} />
<form className="filter" onSubmit={this.handleSubmit}>
<fieldset>
<legend>Filter</legend>
<div className="form-grp">
<select name="type" onChange={this.onChangeType}>
<option>foo</option>
<option>bar</option>
<option>baz</option>
</select>
</div>
</fieldset>
<div className="actions">
<button>{'Add #' + (this.state.items.length + 1)}</button>
</div>
</form>
</div>
);
}
});
React.render(<FilterApp />, document.body);
I cannot seem to wrap my head around how to remove an item from the list. Probably making a ton of other bad design decisions here too, newbs.

Props on components are immutable, meaning you cannot modify them directly. In your above example if the FilterList component wants to remove an item, it would need to call a callback from the parent component.
A simplified example of this.
FilterApp passes a remove function to FilterList that is called on the onClick event. This will remove an item from the parent, update the state, then cause FilterList to re-render with the new content.
Hope this helps.

Something like the below should work. Let your root component manage state.
var FilterList = React.createClass({
render: function() {
var createItem = function(item) {
return (
<li>
<span>{item}</span>
<a href data-id="{item.id}" class="remove-filter" onClick={this.props.remove.bind(item)}>remove</a>
</li>
);
};
return <ul>{this.props.items.map(createItem.bind(this))}</ul>;
}
});
var FilterApp = React.createClass({
getInitialState: function() {
return {items: [], item: {
id: 0,
type: null
}};
},
onChangeType: function(e){
this.setState({
item: {
id: this.state.items[this.state.items.length],
type: e.target.value
}
});
},
remove: function(item, ev){
ev.preventDefault();
var items = this.state.items.filter(function(itm){
return item.id !== itm.id;
});
this.setState({ items: items });
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.item]);
var item = {};
this.setState({items: nextItems, item: {}});
},
render: function() {
return (
<div>
<h3>Filters</h3>
<FilterList remove={this.remove} items={this.state.items} />
<form className="filter" onSubmit={this.handleSubmit}>
<fieldset>
<legend>Filter</legend>
<div className="form-grp">
<select name="type" onChange={this.onChangeType}>
<option>foo</option>
<option>bar</option>
<option>baz</option>
</select>
</div>
</fieldset>
<div className="actions">
<button>{'Add #' + (this.state.items.length + 1)}</button>
</div>
</form>
</div>
);
}
});
React.render(<FilterApp />, document.body);