Como dice el título, intento declarar un componente dentro de mi clase, sin embargo, obtengo un error Indefinido. ¿No puedo hacer esto o lo estoy haciendo mal? Como dije, soy nuevo en React, por lo que cualquier información ayuda. El objetivo general es crear un formulario, pero estoy tratando de hacer que solo aparezcan ciertas opciones dependiendo de cuáles sean las opciones anteriores. Si el código es demasiado, házmelo saber, lo reduciré a lo que importa, pero pensé que proporcionaría todo porque no es tan largo.
import React, {useState, useMemo} from 'react'; import ReactDOM from 'react-dom/client'; import countryList from 'react-select-country-list'; import './index.css'; //import App from './App'; class StartForm extends React.Component { constructor(props) { super(props); this.state = {}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.options = countryList().getData(); } handleChange(event) { this.setState({[event.target.name]: event.target.value}); //alert('Your favorite flavor is: ' + this.state.value); console.log(this.state.accType); } handleSubmit(event) { //alert('Your favorite flavor is: ' + this.state.value); //event.preventDefault(); } //------------------- THIS COMPONENT CustomOptions(props) { return( <label> <input type="checkbox" id="acss_debit_payments" name="acss_debit_payments" value={this.value.acss_debit_payments} onChange={this.handleChange} />Paneer </label> ); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Select Account Type: <select name="accType" value={this.state.accType} onChange={this.handleChange}> <option value="custom">Custom</option> <option value="express">Express</option> <option value="standard">Standard</option> </select> </label> <br/> <label> Select Country Code(Optional): <select name="country" options={this.options} value={this.state.country} onChange={this.handleChange}/> </label> <br/> <label> Email: <input type="text" name="email" value={this.state.email} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> {this.state.accType == "custom" && <CustomOptions /> } </form> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <StartForm/> </React.StrictMode> );Para llamar a CustomOptions , debe hacer referencia a la instancia actual con this :
<this.CustomOptions />Ejemplo: https://codesandbox.io/s/happy-swartz-hsm6ng?file=%2Fsrc%2FApp.js