React
HTML
<div id="app"></div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
.done {
color: rgba(0, 0, 0, 0.3);
text-decoration: line-through;
}
input {
margin-right: 5px;
}
React
class Characters extends React.Component {
constructor(props) {
super(props)
this.state = {
data: {
name: "Tommy Vercetti", location:'Vice City'
}
}
}
removeKey = (keyname) => {
const updatedState = {
data: {
name: 'Tommy Vercetti'
}
};
this.setState(updatedState)
}
render() {
const { data } = this.state;
return (
<div>
<h2 onClick={() => this.removeKey('name')}>Characters:</h2>
<ol>
<li>{data.name}</li>
<li>{data.location}</li>
</ol>
</div>
)
}
}
ReactDOM.render(<Characters />, document.querySelector("#app"))