So I am sort of new to React, I know the basics and tried to create a todo app but I can't figure out how to remove an item also is there any way I could improve this code? Obviously this does not have a remove button yet, I tried to add one. I couldn't figure out how to update state to remove a todo item as the todo items were being stored in state. Also this is in codepen that is why the react is in one file. Thanks!
html: <div id="html"></div>
css:
body {
margin: 0;
}
* {
box-sizing: border-box;
font-family: sans-serif;
}
#html {
background-color: lightblue;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
text-align: center;
font-size: 30px;
}
.add-element {
display: flex;
justify-content: center;
}
li {
list-style: none;
padding: 10px;
background-color: rgba(182, 66, 245, 0.3);
font-size: 20px;
margin: 10px;
max-width: 300px;
word-wrap: break-word;
border-radius: 7px;
display: flex;
justify-content: space-between;
}
li span {
max-width: 250px;
}
ul {
margin: 0;
padding: 0;
}
input {
border: none;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px 5px;
}
.add-btn {
border: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
input:focus,
.add-btn:focus,
.remove:focus {
outline: none;
border: 1px solid black;
}
Javascript/React:
const App = () => {
return (
<div>
<h1>Simple React List App</h1>
<List />
</div>
);
};
class List extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
this.sendStateToParent = this.sendStateToParent.bind(this);
this.state = { items: [], input: "" };
}
sendStateToParent() {
console.log(this.state.items);
}
handleClick() {
if (this.state.input === "") {
alert("Add Something!");
} else {
console.log(this.state.input);
this.setState(
{ items: [...this.state.items, this.state.input] },
this.sendStateToParent
);
this.setState({ input: "" });
}
e.preventDefault();
}
handleChange(e) {
this.setState({ input: e.target.value });
}
render() {
return (
<div>
<div className="add-element">
<input onChange={this.handleChange} value={this.state.input} />
<button onClick={this.handleClick} class="add-btn">
Add
</button>
</div>
<ul>
{this.state.items.map((item, i) => (
<li key={i}>
<span>{item}</span>
</li>
))}
</ul>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("html"));