Skip to content

Instantly share code, notes, and snippets.

@rajatk16
Created Jan 9, 2019
Embed
What would you like to do?
import React, {Component} from 'react';
import {connect} from 'react-redux';
import _ from 'lodash';
import * as actions from '../actions';
import ListItem from './ListItem';
class List extends Component {
state = {
showForm: false,
formValue: ""
};
inputChange = e => {
this.setState({addFormValue: e.target.value});
};
formSubmit = e => {
const {formValue} = this.state;
const {addTodo} = this.props;
e.preventDefault();
addTodo({title: formValue});
this.setState({formValue: ""});
};
renderForm = () => {
const {showForm, formValue} = this.state;
if (showForm) {
return (
<div>
<form onSubmit={this.formSubmit}>
<div>
<i>add</i>
<input
value={formValue}
onChange={this.inputChange}
id="toDoNext"
type="text"
/>
<label htmlFor="toDoNext">What Next?</label>
</div>
</form>
</div>
);
}
};
renderToDo() {
const {data} = this.props;
const toDos = _.map(data, (value, key) => {
return <ListItem key={key} todoId={key} todo={value} />;
});
if (!_.isEmpty(toDos)) {
return toDos;
}
return (
<div>
<h4>You have no more things ToDo!</h4>
</div>
);
}
componentWillMount() {
this.props.fetchTodos();
}
render() {
const {showForm} = this.state;
return (
<div>
<div>
{this.renderForm()}
{this.renderToDo()}
</div>
<div>
<button onClick={() => this.setState({showForm: !showForm})}>
{showForm ? (
<i>Close</i>
) : (
<i>Add</i>
)}
</button>
</div>
</div>
);
}
}
const mapStateToProps = ({data}) => {
return {
data
}
}
export default connect(mapStateToProps, actions)(List);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment