Using function instead of class component in React

JavaScript
1

Hello,
Hopefully this wasnt ask before or if it is, apologize but couldnt find the answer in the forum.
Trying to convert my code to a functional component but it seems not working

function App() {
    const state = {
        fishes:{},
        order:{}
    }
    const addFish = (fish) =>{
        //1. Take copy of the existing state and
        const fishes ={...this.state.fishes}
        //2. add our new fish to that fishes variable
        fishes[`fish${Date.now()}`] = fish;
        //3. Set the new fishes object to state object
        this.setState({fishes});
    }
    const loadSampleFishes = () =>{
this.setState({fishes: sampleFishes(this)});
    }

That is my code, right now its giving the error that _this is undefined. Any advice on how I can get it fixed?

2

In React, functional components behave very differently from class components.

Among those differences: you don’t have a constructor() method, so you can’t define/set state the way you did. In funtional components you will need to import and use hooks…in this case useState.

Also, your function isn’t returning anything; just like class components need a render() method, functional components need to return a single JSX element.

Because the useState handles state differently than a class component… there is also goin to be variations in implementation of a state with more than one state.prop/relatated state.props.

Ideally, with useState, you would handle each state separately. I am not sure as to the context of your App component, I guessing sampleFishes() takes and returns a state object. The code below is a guide as to how to refactor your code to fit.

function App(props) {
    const [simState, setSimulatedState] = useState({fishes:{}, order:{}});
    //your function needs to return a component
    return (
    	<div>
	    	<button onclick={()=>{ simState.fishes[`fish${Date.now()}`] = props.fish; setSimulatedState(simState)}} >ADDING: {props.fish}</button>
	    	<button onclick={()=>{ setSimulatedState(sampleFishes(simState))}} >LOAD</button>
    	</div>
    )
}```

Hope that helps.
3

Thank you…
And apologies… I didnt out the whole code… That was dumb of me…

Yes, I have the return… Here is the full code…

import React from 'react'
import Header from './Header'
import Order from './Order'
import Inventory from './Inventory'
import sampleFishes from '../sample-fishes'

function App() {
    const state = {
        fishes:{},
        order:{}
    }
    const addFish = (fish) =>{
        //1. Take copy of the existing state and
        const fishes ={...this.state.fishes}
        //2. add our new fish to that fishes variable
        fishes[`fish${Date.now()}`] = fish;
        //3. Set the new fishes object to state object
        this.setState({fishes});
    }
    const loadSampleFishes = () =>{
this.setState({fishes: sampleFishes(this)});
    }

    return (
        <div className="catch-of-the-day">
            <div className="menu">
                <Header tagline="Daily Fresh Seafood" />
            </div>
            <Order />
            <Inventory addFish={addFish} loadSampleFishes={loadSampleFishes}/>
            
        </div>
    )
}

export default App

I will see the advice you gave…

Thank you

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.