Estoy tratando de construir un componente de estilo de relleno en blanco. Consiste en un texto con uno o más cuadros de entrada dentro del texto. El número y la ubicación de los cuadros de entrada varía de un texto a otro, por lo que el componente debe construirse dinámicamente. Mi pregunta es: ¿cuál es la mejor manera de almacenar esto en una base de datos y obtenerlo para renderizar?
Mi intento de solución:
Creo que esto funcionaría, pero me pregunto si hay una mejor manera, ya que parece un poco complicado almacenar todo el componente JSX en una base de datos.
No almacene el elemento completo dentro de la base de datos. Solo necesita almacenar los datos relevantes que irán dentro del objeto de entrada:
Por ejemplo:
initialValue, valor, tipo, marcador de posición, etiqueta, isTextArea, etc.
Luego, cuando obtienes datos:
const [inputData, setInputData] = useState(iunitialInputData) useEffect(() => { //Fetch input data from DB data = apiCall() setInputData(data) }) return ( //render inputs here { inputData?.length? inputData.map(item => { //Put data inside here return( <input value={item.value} placeholder={item.placeholder} /> ) }) : <p>No data!</p> } )