Where is wrong in my function-based react code

Hello,

I changed my class-based code to functional. I’m sure there are many mistakes. Can you please inform me which parts of 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);

    getList = (selectedFile) => {
        fetch('api/Image')
            .then(response => response.json())
            .then(data => setSelectedFile({ fileIdList: data }));
    };
    useEffect(() => {

        getList();
    });

    onFileChange = selectedFile => {

        selectedFile: event.target.setSelectedFile[0],
            selectedFileName: event.target.setSelectedFileName[0],
    };

    onDescriptionChange = description => {

        setDescription: event.target.value,
    };
    onFileUpload = async (selectedFile, selectedFileName, uploadResult) => {

        const formData = new FormData();

        formData.append(
            "ImageData.File",
            selectedFile,
            selectedFileName
        );



        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";
                this.getList();
            });
    }

    onNavToEditor = async (redirect) => {

        this.onFileChangeName();

        //this.setState({ redirect: "/ImageEditor" });
        //    this.setState({ selectedFileName: });

        setRedirect: "/ImageEditor";

    };
    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={onNavToEditor} />
            <h1>File Upload Demo</h1>
            <div >{this.state.uploadResult} onClick={onNavToEditor}</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>




    );

};

regards,
Saeed

Hi,

I’m not versed enough in react fp style, but could you articulate what your opinions are to your code? (What you think works well, what you’re apprehensive about? for example).

If you haven’t looked into it I recommend the latest O’reilly react book as a light reference into this style.

There’s also a podcast, Lambda cast, that talks about intro to functional programming topics: LambdaCast | Lambda Cast | Free Listening on SoundCloud

1 Like

Which lesson or project in Codecademy does this relate to? Please share a link.

In functional components:

  • don’t use this or state. State is accessed directly using the constant uploadResult initialised with useState().
  • methods are initialised with const or let
  • to set state, the format is setDescription(event.target.value)

Beyond that , there are some issues that are true regardless of using class or functional components. Check your eventhandlers for inconsistency…

…use console.log to check what is being passed by the event handlers…

The most common syntax for using an event handler is something like:

const handleChange = (event) = {
// do something with the value passed by the event, such as
console.log(event.target.value);
setState(event.target.value);
}

This syntax is a good reminder for what is being passed by the event handler from the element to your method. The event is the onClick or onChange, the target is the input or button element on which the event occurred, and the value refers to the property/properties on the element.

As such, to access the value from within the method, it generally needs to be chained event.target.value.

Here’s some more info about event handlers.

1 Like

Thanks for your answer.
I don’t use Codecademy for learning.
Can you please convert two functions for example?
Can you explain a bit about the parameter passed to function? this is the most confusing part to me! :neutral_face: