Prevent an empty submission in React - reactjs

Question

How would I go about preventing someone from adding nothing my to do list?
AppTodo.JS
import React, { Component } from "react";
import PropTypes from "prop-types";
export class AddTodo extends Component {
state = {
title: ""
};
onSubmit = e => {
e.preventDefault();
if (this.state.addTodo === "") {
alert("??");
} else {
this.props.addTodo(this.state.title);
this.setState({ title: "" });
}
};
onChange = e => this.setState({ title: e.target.value });
render() {
return (
<form onSubmit={this.onSubmit} stlye={{ display: "flex" }}>
<input
type="text"
name="title"
style={{ flex: "10", padding: "5px" }}
placeholder="Add Things Todo..."
value={this.state.title}
onChange={this.onChange}
/>
<input
type="submit"
value="Submit"
className="btn"
style={{ flex: "1" }}
/>
</form>
);
}
}
// Prop Types
AddTodo.propTypes = {
addTodo: PropTypes.func.isRequired
};
export default AddTodo;
I am new to React, just doing it for fun and spent a few hours trying to make conditionals work within the onSumbit method and even in the render() method, but can't seem to make anything work.
Thanks ahead of time.

Answer 1

You do not have an addTodo variable in your state, but you do have a title variable.
Change this.state.addTodo === "" to this.state.title === "" and it will work as expected.
class AddTodo extends React.Component {
state = {
title: ""
};
onSubmit = e => {
e.preventDefault();
if (this.state.title === "") {
alert("??");
} else {
this.props.addTodo(this.state.title);
this.setState({ title: "" });
}
};
onChange = e => this.setState({ title: e.target.value });
render() {
return (
<form onSubmit={this.onSubmit} stlye={{ display: "flex" }}>
<input
type="text"
name="title"
style={{ flex: "10", padding: "5px" }}
placeholder="Add Things Todo..."
value={this.state.title}
onChange={this.onChange}
/>
<input
type="submit"
value="Submit"
className="btn"
style={{ flex: "1" }}
/>
</form>
);
}
}
ReactDOM.render(
<AddTodo addTodo={todo => console.log(`Added todo: ${todo}`)} />,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>