Мои радиокнопки не отображаются (React-Redux и Materialize CSS)

Question

Я пытаюсь сделать так, чтобы пользователи могли задавать истинные / ложные вопросы. Я осмотрелся и не могу понять, почему эти переключатели не отображаются в этом компоненте React (используя 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>
        )
        
    }

}

приводит к:
введите описание изображения здесь

Answer 1

Необходимо использовать правильную разметку, как показано в документации. :

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

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

Materialize не использует радио по умолчанию браузера. Всегда используйте разметку, предложенную docs !