class TodoList extends Component {
List = props => (
<ul>
{
props.items.map((item, index) => <li key={index}>{item}</li>)
}
</ul>
);
state = {
term: '',
items: []
};
onChange = (event) => {
this.setState({term: event.target.value});
}
onSubmit = (event) => {
event.preventDefault()
this.setState({
term: '',
items: [...this.state.items, this.state.term]
});
}
handleClick=()=>{
this.setState(({count})=>({
count: count+1
}));
};
render() {
return (
<>
<div>
<h2>
Todo List
</h2>
<form className="App" onSubmit={this.onSubmit}>
<input value={this.state.term} onChange={this.onChange} />
<button>Submit</button>
</form>
<List items={this.state.items}/>
</div>
<style>{`
.is-done {
text-decoration: line-through;
}
`}</style>
</>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script><List items={this.state.items}/> Not sure what could be the reason for this. I am making a simple submit button along with input text box and the heading
Todo List . But with that last tag <List added it doesn't show anything and there is a blank pageThe advice to move it outside the class is fine, and you SHOULD do it, but you should also understand why it didn't work.
The smallest fix you could do, and it WOULD work that way would be to change
<List items={this.state.items}/>
to
<this.List items={this.state.items}/>
Why? Because the functional component is created inside the class, and thus when React translates JSX code into JS functions - inside the class it is a method belonging to the class (and we know these should be called with this).
If you take it outside the class, then you don't need this, because it is in the same scope as the class definition.