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.