Actualmente estoy haciendo una tarea donde ya estoy implementando BD en React, como tal ya hice un componente llamado conector el cual me conecta a mi base de datos, este es el ejemplo de como lo hice:
const mysql = require('mysql2');
// Configuración de la conexión a la base de datos
const connection = mysql.createConnection({
host: 'nombreAleatorio',
user: 'user',
password: '123456789',
port: 3300,
database: 'restaurante'
});
// Conexión a la base de datos
connection.connect((err) => {
if (err) {
console.error('Error al conectar a la base de datos: ', err);
return;
}
console.log('Conexión exitosa a la base de datos');
});
en ese ejemplo que di ya logre hacer una consulta y me mostro todos mis datos, pero mi duda principal si es necesario volver a hacer la conexion con cada componente que lo necesite utilizando como ejemplo mi componente eliminar
el siguiente es mi componente eliminar:
import React, { useState } from 'react';
import './Styles/EliminarPlatillo.css';
const EliminarPlatillo = () => {
const [producto, setProducto] = useState('');
const buscarProducto = () => {
// aqui tenemos que poner la logica para la basew de datos
if (producto == "nada"){
alert('no existe');
} else{
setProductoEncontrado(producto); //solo puse prodcuto para que que si
funciuone
}
};
const confirmarEliminacion = () => {
// aqui va la logica para eliminar desde base de datos
alert('eliminado');
};
return (
<div className="eliminar-platillo-container">
<div className="eliminar-platillo-left">
<input
type="text"
value={producto}
onChange={(e) => setProducto(e.target.value)}
placeholder="Ingrese el nombre del producto"
/>
<button onClick={buscarProducto}>Buscar</button>
</div>
<div className="eliminar-platillo-right">
<p>{productoEncontrado}</p>
<button onClick={confirmarEliminacion}>Confirmar Eliminación</button>
</div>
</div>
);
};
export default EliminarPlatillo;
en ese componente es donde tengo que solicitar algunos datos para despues poder eliminarlos de la BD , pero mi duda radica aqui, si es necesario volver a hacer la conexion o se puede usar la misma conexion que hice anteriormente, y como podria implementarlo en este componente aqui.