My Radio Buttons don't appear (React-Redux & Materialize CSS)

Question

I'm trying to make a that allows users to make true/false questions. I've looked all around and can't figure out why these radio buttons don't appear in this React component (using Materialize CSS).

render() {

        const { courseTitle, courseDescription } = this.props;


        return (

            <div className='container selection create-lecture'>

                <div className='row'>

                    <form onSubmit={this.handleSubmit} className='white'>
                        <h5 className='grey-text text-darken-3'>True / False Question</h5>
                        <p></p>

                        <div className='input-field'>
                            <label htmlFor='questionQuestion'>Your True/False Question:</label>
                            <textarea className='materialize-textarea' id='questionQuestion' onChange={this.handleChange}>
                            
                            </textarea> 
                        </div>

                        <p>
                            <input id='radio-true' type="radio" value="true" checked={this.state.selectedRadioOption === "true"} onChange={this.onValueChange}/>
                            <label htmlFor='radio-true'>True</label>

                        </p>
                        
                        <p>
                            <input id='radiofalse' type="radio" value="false" checked={this.state.selectedRadioOption === "false"} onChange={this.onValueChange}/>
                            <label htmlFor='radiofalse'>False</label>

                        </p>


                        <div className='input-field'>
                            <button className='btn custom-orange lighten-1 z-depth-0'>Create Question</button>
                        </div>

                    </form>

                </div>

            </div>
        )
        
    }

}

results in:

Answer 1

You need to use the correct markup as shown in the documentation. :

<label>
  <input name="group1" type="radio" checked />
  <span>Red</span>
</label>

1. Label (wrapper)
2. Input
3. Span

Materialize doesn't use the browser default radio. Always use the markup suggested by the docs!