When using useState with an array argument, how do you use useEffect to update a button dynamically?

Question

New to React so be gentle. I created a file uploader component and I am adding a button in App.js that is dependent on the state of the files uploaded. If there are no files uploaded, it will say "No files uploaded". If there are files uploaded it will say "Create new project". I'm using the useState hook to set my Project info:

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;

As you can see, right now there is a static "Create New Project" button. I created styled containers for each of the buttons I want to render dynamically (see: CreateNewProjectBtn & NoFilesSelectedBtn), but I cannot access the props of the state to change the button when a file is uploaded. I know I have to use useEffect but the document[] prop of newProjectInfo is inaccessible - but that is what is being updated. Hopefully this was clear. Please let me know if I need to clarify.

Answer 1

I see, you want to conditionally render different button text based on the newProjectInfo.documents array being populated or not. Use a ternary operator to check if the newProjectInfo.documents array has a truthy length (non-zero) property to conditionally render one string or the other.

No need to use an useEffect for this, updating the state will trigger a rerender. Just compute the displayed button text per render cycle.

Example:

<button>
  {newProjectInfo.documents.length ? "No files uploaded" : "Create New Project"}
</button>