I have the following code, but it is not rendering the input tags. I have checked this by default checking a specific input, but it doesn't update the value.
import React, { useState, useContext } from "react"
import { Redirect } from "react-router-dom"
import { UserContext } from "../userContext"
export default function UserCreateAccountForm() {
const context = useContext(UserContext)
const initInputs =
{
userType: "",
username: "",
aboutUser: "",
profilePicture: "",
}
const [inputs, setInputs] = useState(initInputs)
function handleChange(e) {
const {name, value} = e.target
setInputs(prevInputs => ({...prevInputs, [name]: value, }))
}
function handleSubmit(e) {
e.preventDefault()
context.setUserData(inputs)
// .then(() => {
// <Redirect to="/" />
// })
console.log(inputs)
}
return (
<form onSubmit={handleSubmit} className="form">
<>
<>
<input
type="radio"
id="smallBusiness"
name="userType"
value="smallBusiness"
checked={true}
/>
<label>Small Business</label>
</>
<input
type="radio"
id="nonprofit"
name="userType"
value="nonprofit"
/>
<label for="nonprofit">Nonprofit</label>
<input
type="radio"
id="supporter"
name="userType"
value="supporter"
/>
<label for="supporter">{`User (someone who supports small businesses and nonprofits alike)`}</label>
</>
<input
className="inputItem"
type="text"
name="username"
value={inputs.username}
onChange={handleChange}
placeholder="Please select a username"
/>
<input
className="inputItem"
type="text"
name="aboutUser"
value={inputs.aboutUser}
onChange={handleChange}
maxLength="142"
placeholder="Use 142 characters to tell us about yourself "
/>
<input
className="inputItem"
type="file"
id="profilePicture"
name="profilePicture"
value={inputs.profilePicture}
onChange={handleChange}
/>
<label for="profilePicture">Please choose a profile picture</label>
<button className="inputItem">Submit</button>
</form>
)
}
I didn't have onChange called for the radio buttons, so they weren't updating the db. Also, there was some css styling that was hiding the buttons.