ReactJS: Conditional rendering submits form data before handleSubmit function - reactjs

Question

I have a form that upon completion renders a button with form data.
The form takes two inputs: 1. Title (text rendered in button) & 2.) URL for the button.
The form works with the conditional statement if I paste in a URL. However if I begin manually typing a URL, it generates the button based on the first character I type because the string is no longer empty.
export default class URLButton extends Component {
constructor(props) {
super(props)
this.state = {
links: [],
url: '',
title: ''
}
}
// onChange
onChange = (e) => {
e.preventDefault(e)
this.setState({
[e.target.name]: e.target.value
})
}
// onSubmit
onSubmit = e => {
e.preventDefault()
}
render() {
if (this.state.url === "") {
return (
<>
<form onClick={this.onSubmit}>
<input
name="title"
type="text"
placeholder="add button text"
onChange={e => this.setState({ title: e.target.value })}
/>
<input
name="url"
type="url"
placeholder="your-link.com"
onChange={e => this.setState({ url: e.target.value })}
/>
<br />
</form>
<button type="submit">Submit</button>
</>
)
} else {
return (
<>
<div>
{this.state.title}
</div >
</>
)
}
}
}
Since the onChange and onSubmit function works, I've narrowed it down to the conditional statement if (this.state.url === "") {... I've tried setting it to null and false instead of an empty string but the form doesn't render if I try those statements.

Answer 1

Yeah, you're right, your problem is that, when you typed something, the url state is not empty anymore, you'll have to validate that the url is valid in order to submit the form, I've made a StackBlitz with the solution of the problem, I hope this helps.

Answer 2

If you want to finish typing and than generate the button
you can change your onChange to onBlur as
<input
name="url"
type="url"
placeholder="your-link.com"
onBlur={e => this.setState({ url: e.target.value })}
/>
Now when you type out and blur out of input than button will be gernerated
Hope it helps

Answer 3

First of all you should pass yours input states to input:
...
<input
name="url"
type="url"
value={this.state.url} // here
placeholder="your-link.com"
onChange={e => this.setState({ url: e.target.value })}
/>
...
By this edit onChange would pass to set state not only character you've just wrote, but all of previous charecters plus last one.
Then look at your code here:
...
if (this.state.url === "")
...
It would be false right after the FISRT charecter in state.url setted.
If you need to check for correct URL you should use regexp in if condition, to check if state.url looks like correct url by your expectations and ONLY after that render the other part of component.