Search code examples
reactjsformsradio-button

Why are my radio inputs not rendering in React


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>
    )
}

Solution

  • 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.