Nuevo en React, así que sé amable. Creé un componente de carga de archivos y estoy agregando un botón en App.js que depende del estado de los archivos cargados. Si no hay archivos cargados, dirá "No hay archivos cargados". Si hay archivos cargados, dirá "Crear nuevo proyecto". Estoy usando el enlace useState para configurar la información de mi proyecto:
const [newProjectInfo, setNewProjectInfo] = useState([documents: []});
import React, { useEffect, useRef, useState } from "react"; import FileUpload from "./components/file-upload/fileUpload"; import { //Custom components created with styled-components UploadToProjectContainer, CreateNewProjectBtn, NoFilesSelectedBtn } from "./components/file-upload/fileUploadStyles"; function App() { const [newProjectInfo, setNewProjectInfo] = useState({ documents: [] }); const updateUploadedFiles = (files) => setNewProjectInfo({ ...newProjectInfo, documents: files}); const handleSubmit = (event) => { event.preventDefault(); //add logic to create a new project } return ( <div> <form onSubmit={handleSubmit} > <FileUpload accept=".jpg,.png,.jpeg,.pdf,.doc,.gif,.bmp,.tiff,.svg,.dwg,.docx,.eps,.exe" label="File(s)" multiple updateFilesCb={updateUploadedFiles} /> <UploadToProjectContainer> <button> Create New Project. </button> </UploadToProjectContainer> </form> </div> ); } export default App; Como puede ver, en este momento hay un botón estático "Crear nuevo proyecto". Creé contenedores con estilo para cada uno de los botones que quiero representar dinámicamente (ver: CreateNewProjectBtn & NoFilesSelectedBtn ), pero no puedo acceder a los accesorios del estado para cambiar el botón cuando se carga un archivo. Sé que tengo que usar useEffect pero el document[] prop de newProjectInfo es inaccesible, pero eso es lo que se está actualizando. Esperemos que esto haya sido claro. Por favor, hágamelo saber si necesito aclarar.
Ya veo, desea representar condicionalmente un texto de botón diferente en función de la matriz newProjectInfo.documents que se completa o no. Use un operador ternario para verificar si la matriz newProjectInfo.documents tiene una propiedad de length real ( distinta de cero ) para representar condicionalmente una cadena u otra.
No es necesario usar un useEffect para esto, actualizar el estado activará una nueva representación. Simplemente calcule el texto del botón mostrado por ciclo de renderizado.
Ejemplo:
<button> {newProjectInfo.documents.length ? "No files uploaded" : "Create New Project"} </button>