¿Cómo establecer el valor predeterminado en seleccionar usando ReactJS?

En HTML, el atributo ‘ seleccionado’ en la etiqueta de opción se usa para establecer el valor predeterminado en el menú de selección. El mismo enfoque también se puede usar con React para establecer un valor predeterminado si no estamos usando React Select Component. Sin embargo, si está utilizando react-select , debe seguir un enfoque diferente como se describe a continuación.

Los siguientes son los dos enfoques para establecer el valor predeterminado en la selección usando ReactJS:

Enfoque 1: sin usar el componente React Select

Puede usar un atributo booleano seleccionado con una opción cuyo valor debe establecerse como predeterminado. Si ninguna opción está integrada con este atributo, la primera opción se selecciona de forma predeterminada. Puedes leer más sobre este método en este artículo .

Sintaxis:

<option value='value' selected> label </option>

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import { Component } from 'react'
  
class App extends Component {
  constructor(props) {
    super(props)
  }
    
  render() {
    return (
      <div>
        <p>Geeks For Geeks</p>
  
        <form>
          <select name='languages'
                  style={{ width: '200px' }}>
            <option value='JAVA'>
              JAVA
            </option>
            <option value='C++'>
              C++
            </option>
            <option value='Javascript' selected>
              Javascript
            </option>
            <option value='Python'>
              Python
            </option>
            <option value='R'>
              R
            </option>
            <option value='Scala'>
              Scala
            </option>
            <option value='Swift'>
              Swift
            </option>
          </select>
        </form>
      </div>
    );
  }
}
  
export default App;

Producción:

Salida cuando el código se ejecuta en el servidor local

Enfoque 2: Uso del componente React Select

Puede usar un atributo defaultValue para establecer el valor predeterminado en el menú Seleccionar. Si ninguna opción está integrada con este atributo, la primera opción se selecciona de forma predeterminada. Puede crear una array del objeto donde almacenará todas las opciones que se mostrarán y cualquier objeto único se pasa en el atributo defaultValue .

Sintaxis:

<Select
    option={optionArray}
    defaultValue={optionArray[index]}
/>

Nota: Asegúrese de haber instalado el módulo react-select usando el siguiente comando.

npm install react-select

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import { Component } from 'react'
import Select from 'react-select';
  
const options = [
  { value: 'C++', label: 'C++' },
  { value: 'JAVA', label: 'JAVA' },
  { value: 'Javascript', label: 'Javascript' },
  { value: 'Python', label: 'Python' },
  { value: 'Swift', label: 'Swift' }
];
  
class App extends Component {
  constructor(props) {
    super(props)
  }
  
  render() {
    return (
      <div>
        <p>Geeks For Geeks</p>
  
        <Select
          value={options.value}
          options={options}
          defaultValue={options[1]}
        />
      </div>
    );
  }
}
  
export default App;

Producción:

Salida cuando el código se ejecuta en el servidor local