react hook component create code example
Example 1: react custom hooks
import React, { useState } from "react";
const useForm = callback => {
const [values, setValues] = useState({});
return {
values,
onChange: e => {
setValues({
...values,
[e.target.name]: e.target.value
});
},
onSubmit: e => {
e.preventDefault();
callback();
}
};
};
export default function App() {
const { values, onChange, onSubmit } = useForm(() => {
console.log(values.username);
console.log(values.email);
});
return (
<div>
<form onSubmit={onSubmit}>
<input type="text" name="username" onChange={onChange} />
<input type="email" name="email" onChange={onChange} />
<input type="submit" value="Sing-in" />
</form>
</div>
);
}
Example 2: react hooks
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; }
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}