Type '{ children: string; download: undefined; }' is not assignable to type 'IntrinsicAttributes & { downloadPageLink: any; }'

Question

I'm working on a simple React application, Where you can share your files. So when I upload the file it goes back to the database and creates a secure_Url and displays it in the front-end. That is downloadPageLink. I don't know why it's throwing this error when I import my file to index.tsx

this is my index.tsx

import DropZoneComponent from "@components/DropZoneComponent";
import {useState} from "react";
import RenderFile from "@components/RenderFile";
import axios from "axios";
import DownloadFile from "../components/DownloadFile";

export default function Home() {
    const [file, setFile] = useState(null)
    const [id, setId] = useState(null)
    const [downloadPageLink, setDownloadPageLink] = useState()
    const [uploadState, setUploadState] = useState<"Uploading" | "Upload Failed" | "Uploaded" | "Upload">("Upload")

    const handleUpload = async () => {
        if (uploadState === "Uploading") return;
        setUploadState("Uploading")

        const formData = new FormData();
        formData.append("myFile", file)
        try {
            const {data} = await axios({
                method: "POST",
                data: formData,
                url: "api/files/upload",
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            });
            setDownloadPageLink(data.downloadPageLink);
            setId(data.id);
        } catch (error) {
            console.log(error.response.data)
            setUploadState("Upload Failed")
        }
    }
    return (
        <div className="flex flex-col items-center justify-center">
            <h1 className="my-4 text-2xl font-weight-medium font-body tracking-wide">Got a file? Lezz share it!</h1>
            <div className="w-96 h-auto flex flex-col items-center bg-gray-800 shadow-xl rounded-xl justify-center">
                {!downloadPageLink && <DropZoneComponent setFile={setFile}/>}
                {file &&
                <RenderFile file={{
                    format: file.type.split("/")[1],
                    name: file.name,
                    sizeInByte: file.size,
                }}
                />
                }
                <button className="w-36 bg-gray-900 rounded-md h-10 mb-6 focus:outline-none font-body tracking-wider transition duration-500 ease-in-out transform hover:-translate-y-0 hover:scale-110 "
                        onClick={handleUpload}>{uploadState}</button>
                {
                    downloadPageLink &&
                    <DownloadFile download={downloadPageLink} >
                        Email form
                    </DownloadFile>
                }
            </div>
        </div>
    )
}

Here's my DownloadFile.tsx

 const DownloadFile = ({downloadPageLink}) => {
    return (
        <div className="p-1">
            <h1 className="my-2 text-lg font-medium font-body">
                Yo
            </h1>
            <div className="flex space-x-3">
                <span className="break-all">{downloadPageLink}</span>
                <img src="/images/copy.png" alt="" className="w-8 h-8 object-contain cursor-pointer"/>
            </div>

        </div>
    )
}

 export default DownloadFile

My _app.tsx

import "tailwindcss/tailwind.css";
import "../../styles/globals.css";
import axios from "axios";


axios.defaults.baseURL = "http://localhost:8000/"

function MyApp({ Component, pageProps }) {
  return (
      <div className="grid h-screen font-serif text-white bg-gray-900 place-items-center">
        <Component {...pageProps} />
      </div>
  )
}

export default MyApp;

My package.json

{
  "name": "save-walter-x",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "next": "10.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-dropzone": "^11.3.4"
  },
  "devDependencies": {
    "@tailwindcss/jit": "^0.1.18",
    "@types/react": "^17.0.3",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.9",
    "tailwindcss": "^2.1.1",
    "typescript": "^4.2.4"
  }
}

I'm experiencing this complication in index.tsx when I'm importing the DownloadFile.tsx to index.tsx

What am I doing wrong and why typescript is behaving acting weird? I'm new to this.

Thanks in advance :)

Answer 1

In the DownloadFile Component, you have explicitly mentioned the only expected props as downloadPageLink. There are two mistakes.

1. In index.tsx, you are sending the prop as download. It should have been downloadPageLinklike the below snippet.

<DownloadFile downloadPageLink={downloadPageLink} >
                        Email form
                    </DownloadFile>

2. You are not using the children in the DownloadFile component. Either remove the children or use the children in DownloadFile component. Instead of this

<DownloadFile downloadPageLink={downloadPageLink} >
                        Email form
                    </DownloadFile>

it should be like this

<DownloadFile downloadPageLink={downloadPageLink} />