Skip to content

Instantly share code, notes, and snippets.

@xavierartot
Last active Jan 20, 2018
Embed
What would you like to do?
import React from 'react';
const ListItem = (props) => {
return (
<li>
<span className='text-normal'>{props.item}</span>
<button
onClick={props.onClickRemove}
className="btn btn-remove">remove</button>
<button
onClick={props.onClickDone}
className="btn btn-done">done</button>
</li>
)
}
export default class TodoList extends React.Component {
constructor() {
super();
this.state = {
term : '',
styleDone: '',
itemList : ['js', 'Ruby', 'Java', 'Vim']
}
}
removeButton = (index) => {
let newArr = [...this.state.itemList]
newArr.splice(index, 1)
this.setState({
itemList : newArr
});
}
doneButton = (index) => {
console.log(2);
let textNormal = document.querySelector('.text-normal')
let newArr = this.state.itemList.forEach(function (cle, i, origin) {
i === index ? <span className="done">{cle}</span> : cle
});
this.setState({
itemList: newArr
});
}
onClickTerm = (e) => {
e.preventDefault()
let term = document.querySelector('.term').value,
cpItemList = this.state.itemList.slice()
if ( cpItemList.includes(term) === false ) {
let newArrItem = [...this.state.itemList, term]
this.setState({
itemList : newArrItem,
});
document.querySelector('.term').value = ''
}
}
render() {
const items = this.state.itemList.map( (element,index) => {
return <ListItem
key={element.toString()}
item={element}
onClickRemove={ () => this.removeButton(index)}
onClickDone={ () => this.doneButton(index)} />
});
return (
<div>
<div className="form">
<input type='text'
className="term"
/>
<button
onClick={this.onClickTerm}>
Add
</button>
</div>
<ul>
{items}
</ul>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment