How to make form component submit using button in form? - reactjs

Question

I have the following code where a text input box accepts an url and if it is valid it should create a display area and provide a nice preview of the url.
But I am not sure how to associate the submit from the button with the submit from the form.
import React, {useState} from 'react';
import './App.css';
import Microlink from '#microlink/react';
import { String } from 'core-js';
import Card from '#material-ui/core/Card';
import TextField from '#material-ui/core/TextField';
import Button from "#material-ui/core/Button";
function validURL(str) {
var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
return !!pattern.test(str);
}
function App (){
const [myurl, setMyurl] = useState("")
const [display, setDisplay] = useState(true)
const handleChange = (event) => {
const url = event.target.value
var str = validURL(url)
console.log(str)
str ? setMyurl(String(url)) : setDisplay(false)
}
return (
<form>
<TextField
id="outlined-name"
label="Name"
margin="normal"
variant="outlined"
onSubmit={event => handleChange(event)}
/>
<Button
type="submit"
variant="contained"
>
Submit
</Button>
{display ?
<Card>
<Microlink url={myurl}/>;
</Card> : null}
</form>
)
}
export default App;

Answer 1

You need to put the onSubmit inside the form tag like this. Also need to have a controlled form. Meaning, you need an onChange, I wrote it for you.
return (
<form onSubmit={event => handleChange(event)} >
<TextField
id="outlined-name"
label="Name"
margin="normal"
variant="outlined"
value={myurl}
onChange={e => setMyUrl(e.target.value)}
/>
<Button
type="submit"
variant="contained"
>
Submit
</Button>
{display ?
<Card>
<Microlink url={myurl}/>;
</Card> : null}
</form>
)
}
export default App;