Tutorial de la lista desplegable personalizada de React Bootstrap con Fetch API

El menú desplegable es un módulo valioso y destacado, que a menudo se usa para seleccionar una opción de la lista dada. Pero, ¿sabe cómo construir un módulo desplegable dinámico desde cero?

Este tutorial cubre múltiples conceptos de React. En general, le mostraremos cómo crear una lista desplegable en la aplicación React. Enumeraremos cada elemento que se utilizará para crear un menú desplegable en React.

Por lo general, un menú desplegable es un cuadro de selección horizontal que muestra un valor seleccionado por el usuario entre otros elementos de la lista desplegable. Aprenderá cómo configurar dinámicamente las propiedades de la lista en React usando la API de búsqueda y Bootstrap.

Fetch API es una interfaz simplificada que le permite activar solicitudes HTTP a servidores desde navegadores web. Aprenderá a usar la API de búsqueda para realizar una solicitud HTTP que lo ayude a crear un módulo desplegable personalizado en React.

Cómo crear una lista dinámica en React DropDown con solicitud HTTP

• Paso 1: Descargar Proyecto Reaccionar
• Paso 2: Instalar la biblioteca Bootstrap
• Paso 3: Crear lista en el componente desplegable
• Etapa 4: Actualizar el archivo Js de la aplicación
• Paso 5: Iniciar servidor de desarrollo

Descargar Proyecto Reaccionar

Colóquese en la terminal, puede usar la aplicación de terminal o ir con la terminal integrada en su editor de código favorito.

Usaremos la herramienta npx y create-react-app para descargar la nueva aplicación.

npx create-react-app react-webb

Una vez que el proyecto en blanco se haya descargado por completo, vaya a la carpeta de la aplicación.

cd react-webb

Si instaló la aplicación con anticipación, continúe con el siguiente paso.

Instalar la biblioteca Bootstrap

En este paso tendrás que instalar el paquete Bootstrap. Aparentemente, esta biblioteca acelera el trabajo de creación de módulos de interfaz de usuario.

En la terminal, escriba el comando dado y presione enter.

npm install bootstrap

Muévete hacia el Aplicación.js, aquí tienes que importar la ruta de arranque.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
export default function App() {
  return (
    <>
     
    <>
  )
}

Crear lista en el componente desplegable

Ahora, en este paso, revelaremos cómo crear una lista desplegable personalizada.

En consecuencia, entrar en componentes/ carpeta, a continuación, cree la CustomListDropDown.js archivo y agregue el siguiente código dentro del archivo.

import React from 'react'
export const CustomDropdown = (props) => (
  <div className="form-group">
    <strong>{props.username}</strong>
    <select
      className="form-control"
      name="{props.username}"
      onChange={props.onChange}
    >
      <option defaultValue>Select {props.name}</option>
      {props.options.map((item, index) => (
        <option key={index} value={item.id}>
          {item.username}
        </option>
      ))}
    </select>
  </div>
)
export default class CustomListDropDown extends React.Component {
  constructor() {
    super()
    this.state = {
      collection: [],
      value: '',
    }
  }
  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((res) => this.setState({ collection: res }))
  }
  onChange = (event) => {
    this.setState({ value: event.target.value })
  }
  render() {
    return (
      <div className="container mt-4">
        <h2>React Dropdown List with Bootstrap Example</h2>
        <CustomDropdown
          name={this.state.username}
          options={this.state.collection}
          onChange={this.onChange}
        />
      </div>
    )
  }
}

Actualizar el archivo Js de la aplicación

Hasta ahora hemos completado casi todo el trabajo. Solo necesita importar el componente desplegable personalizado en el Aplicación.js.

import React from 'react'
import CustomListDropDown from './components/CustomListDropDown'
import 'bootstrap/dist/css/bootstrap.min.css'
export default function App() {
  return (
    <>
      <CustomListDropDown />
    </>
  )
}

Iniciar servidor de desarrollo

Abra la terminal por última vez y escriba el comando dado y no olvide ejecutar el comando.

npm start

Después de que se inicie el servidor, asegúrese de copiar y pegar la URL dada para verificar la función que creamos.

http://localhost:3000

Conclusión

Esta publicación nos ayudó a comprender cómo crear un componente desplegable personalizado en React. Una lista desplegable es un componente importante de la interfaz de usuario que permite a los usuarios seleccionar opciones de una lista.

Usamos la API real para mostrar la lista, buscamos los datos y los pusimos en el menú desplegable.