locked
What is your idea about my changed code from class-based to functional RRS feed

  • Question

  • User172056746 posted

    Hello,

    I’ve changed my class-based component to functional.
    I will be pleased if you let me know your idea about the code or if anywhere is wrong.

    //import React, { Component } from 'react';
    import { Redirect } from "react-router-dom";
    import React, { useState } from "react";
    
    export function ImageUpload1() {
    
        const [redirect, setRedirect] = useState(null);
        const [selectedFile, setSelectedFile] = useState(null);
        const [description, setDescription] = useState(null);
        const [uploadResult, setUploadResult] = useState(null);
        const [selectedFileName, setSelectedFileName] = useState(null);
        const [fileIdList, setFileIdList] = useState([]);
    
    
        useEffect(
    
            //getList();
            const getList = () => {
                fetch('api/Image')
                    .then(response => response.json())
                    .then(data => setFileIdList({ fileIdList: data }));
            };
        );
    
        const onFileChange = event => {
    
            //selectedFile: event.target.setSelectedFile[0],
            //    selectedFileName: event.target.setSelectedFileName[0],
            setSelectedFile(event.target.files[0]);
            setSelectedFileName(event.target.files[0]);
        };
    
        const onDescriptionChange = event => {
    
            setDescription(event.target.value);
        };
        const onFileUpload = async () => {
    
            const formData = new FormData();
    
            formData.append(
                "ImageData.File",
                setSelectedFile,
                setSelectedFileName
            );
    
    
    
            fetch('/api/Image', {
                method: 'POST',
                body: formData
            }).then(resposne => resposne.json())
                .then(data => {
                    console.log(data);
                    //this.setState({ uploadResult: "File " + data.fileName + " successfully uploaded." });
                    setUploadResult: "File" + data.fileName + "successfully uploaded";
                    getList();
                });
        }
    
        const onNavToEditor = async () => {
    
            //this.onFileChangeName();
    
            //this.setState({ redirect: "/ImageEditor" });
            //    this.setState({ selectedFileName: });
    
            setRedirect( "/ImageEditor");
    
        };
        const listItems = () => {
            const listItems = this.state.fileIdList.map((item) =>
                <div key={item.imageId.toString()}>
                    <img src={"/api/Image/DownloadImage/" + item.imageId}
                        alt={item.fileName}
                        className="img-thumbnail"
                        height="100" width="100" />
                </div>
            );
            return (<div>{listItems}</div>);
        };
    
        return (
    
            <div>
                <div style={mystyle} onClick={NavToEditor} />
                <h1>File Upload Demo</h1>
                <div >{uploadResult} onClick={NavToEditor}</div>
                <div>
                    <input type="file" onChange={FileChange} />
                    <input type="text" value={this.state.value} onChange={DescriptionChange} />
                    <button onClick={FileUpload}>
                        Upload!
                        </button>
    
                </div>
    
                <div onClick={NavToEditor}>
    
                    {listItems()}
    
                </div>
    
            </div>
    
        );
    
    };
    
    

    The highlighted parts are where I am sure are wrong. But have no idea about them!!

    regards,

    Saeed

    Friday, May 21, 2021 5:23 PM

All replies

  • User-474980206 posted

    You converted the state variables to local, what’s difficult?

       const listItems = () => {
            const listItems = fileIdList.map((item) =>
                <div key={item.imageId.toString()}>
                    <img src={"/api/Image/DownloadImage/" + item.imageId}
                        alt={item.fileName}
                        className="img-thumbnail"
                        height="100" width="100" />
                </div>
            );
            return (<div>{listItems}</div>);
        };

    Though this could be better written

    const listItems = () =>  <div> 
           { this.state.fileIdList.map((item) =>
                <div key={item.imageId.toString()}>
                    <img src={"/api/Image/DownloadImage/" + item.imageId}
                        alt={item.fileName}
                        className="img-thumbnail"
                        height="100" width="100" />
                </div>);
            }
    </div>;
       

    I assume value was replaced with description 

        <input type="text" value={description} onChange={DescriptionChange} /> 
    Monday, May 24, 2021 4:26 PM
  • User887623398 posted

    Do you think other parts will be the same?

    Saturday, June 5, 2021 8:33 AM