Please look at my code first.

I get 1 to 3 files from DB, depending on how many files did a writer uploaded. The maximum is 3, and if there's none, I render 'There is no file'.

To flexibly render files, I used three conditional statements. However, It is too messy and I think there is probably better idea than this.

const innerPost = () => {

    const [files, setFiles] = useState([]);
    const [deletedFilePk, setDeletedFilePk] = useState([]);

    const deleteFile1 = () => {
        setDeletedFilePk([...deletedFilePk, filePkNum]);
        console.log(deletedFilePk);
    };

    const deleteFile2 = () => {
        setDeletedFilePk([...deletedFilePk, filePkNum   1]);
        console.log(deletedFilePk);
    };

    const deleteFile3 = () => {
        setDeletedFilePk([...deletedFilePk, filePkNum   2]);
        console.log(deletedFilePk);
    };


    return (
        <>
                {files.map((file) => {
                    if (file.length == 0) {
                        return (
                            <div>
                                <h5>THERE IS NO FILE.</h5>
                            </div>
                        );
                    }
                    if (file.length == 1) {
                        return (
                            <div>
                                <div>
                                    <a
                                    href={`/api/store/download-noticeboard-file fileId=${filePkNum}`}
                                    >
                                        {file[0]}
                                    </a>
                                    <Button
                                        size='small'
                                        onClick={deleteFile1}
                                    >
                                        delete
                                    </Button>
                                </div>
                            </div>
                        );
                    }
                    if (file.length == 2) {
                        return (
                            <div>
                                <div>
                                    <a
                                        href={`/api/store/download-noticeboard-file?fileId=${filePkNum}`}
                                    >
                                        {file[0]}
                                    </a>
                                    <Button
                                        size='small'
                                        onClick={deleteFile1}
                                    >
                                        delete
                                    </Button>
                                </div>
                                <div>
                                    <a
                                        href={`/api/store/download-noticeboard-file?fileId=${filePkNum   1}`}
                                    >
                                        {file[1]}
                                    </a>
                                    <Button
                                        size='small'
                                        onClick={deleteFile2}
                                    >
                                        delete
                                    </Button>
                                </div>
                            </div>
                        );
                    }
                    if (file.length == 3) {
                        return (
                            <div>
                                <div>
                                    <a
                                        href={`/api/store/download-noticeboard-file?fileId=${filePkNum}`}
                                    >
                                        {file[0]}
                                    </a>
                                    <Button
                                        size='small'
                                        onClick={deleteFile1}
                                    >
                                        delete
                                    </Button>
                                </div>
                                <div>
                                    <a
                                        href={`/api/store/download-noticeboard-file?fileId=${filePkNum   1}`}
                                    >
                                        {file[1]}
                                    </a>
                                    <Button
                                        size='small'
                                        onClick={deleteFile2}
                                    >
                                        delete
                                    </Button>
                                </div>
                                <div>
                                    <a href={`/api/store/download-noticeboard-file?fileId=${filePkNum   2}`}></a>
                                    <Button
                                        size='small'
                                        onClick={deleteFile3}
                                    >
                                       delete
                                    </Button>
                                </div>
                            </div>
                        );
                    }
                })}
        </>
    );
};

export default innerPost;

I need some wisdom!

CodePudding user response：

You can map through the array and display each item and use the index property for your functions:

const innerPost = () => {

    const [files, setFiles] = useState([]);
    const [deletedFilePk, setDeletedFilePk] = useState([]);

    const deleteFile = (index) => {
        setDeletedFilePk([...deletedFilePk, index]);
        console.log(deletedFilePk);
    }


    if (file.length == 0) {
        return (
            <div>
                <h5>THERE IS NO FILE.</h5>
            </div>
        );
    } else {
        files.map((file, index) => {
            return (
                <div>
                    <a
                        href={`/api/store/download-noticeboard-file fileId=${index}`}
                    >
                        {file}
                    </a>
                    <Button
                        size='small'
                        onClick={() => deleteFile(index)}
                    >
                        delete
                    </Button>
                </div>
            );
        })
    }
};

export default innerPost;