After passing a function from a child component the value passed into the function is returned as a number instead of an object

Question

So I am writing a simple program which takes selections off of a drawer and then show them as part of a recipe, but when the function from the parent is called the updated value sent to the parent is a number rather than the object. I'm not sure what i'm doing wrong and would really appreciate some help.

Parent:

import React, {Component} from 'react';
import {listOfOils} from "./Constants/OilList";
import OilDrawer from "./Components/OilDrawer";
import OilMixCard from "./Components/OilMixCard";

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            recipe: [],
            recipeName: ''
        }

    }

    addOilToRecipe = (oil) => {
        this.setState(() => {
                return {recipe: this.state.recipe.push(oil)}
            }
        )
    }

    setRecipeName = (name) => {
        this.setState(() => {
            return {recipeName: name}
        })
    }

    render() {
        return (

            <div className="App">
                <OilDrawer
                    addOil={this.addOilToRecipe}
                    oils={listOfOils}
                />
                {
                    console.log(JSON.stringify(this.state.recipe))
                }
                {/*The value for recipe when printed in the OilMixCard in the console is 1*/}
                <OilMixCard
                    recipe={this.state.recipe}
                    updateName={this.setRecipeName}
                />
            </div>
        );
    }
}

export default App;

Child:

import Divider from '@material-ui/core/Divider'
import Avatar from "@material-ui/core/Avatar";
import ListItem from "@material-ui/core/ListItem";
import List from "@material-ui/core/List";
import ListItemText from "@material-ui/core/ListItemText";

class OilDrawer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            openDrawer: true
        }
    }

    // handleDrawerClose = () => {
    //     this.setState({openDrawer: false})
    // }

    render() {
        return (
            <Drawer

                className="oil_drawer"
                variant='persistent'
                anchor='right'
                open={this.state.openDrawer}
            >
                {/*<IconButton onClick={this.handleDrawerClose}>*/}
                    {/*<ChevronRightIcon/>*/}
                {/*</IconButton>*/}
                <Divider/>
                <List>
                    {this.props.oils.map(oil =>
                        <ListItem
                            button
                            onClick={() => this.props.addOil(oil)}
                            key={oil.name}
                        >
                            <Avatar src={oil.image}/>
                            <ListItemText primary={oil.name}/>
                        </ListItem>
                    )}
                </List>
            </Drawer>
        )
    }
}

export default OilDrawer

Another Child which displays the recipe:

import React from 'react'
import Paper from "@material-ui/core/Paper";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";

class OilMixCard extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <Paper>
                <List>
                    {console.log(JSON.stringify(this.props.recipe))}
                    {
                        this.props.recipe.map(oil =>
                            <ListItem
                                button onClick={() => this.props.addOil(oil)}
                                key={oil.name}
                            >
                                <Avatar src={oil.image}/>
                                <ListItemText primary={oil.name}/>
                            </ListItem>
                        )
                    }
                </List>
            </Paper>
        )
    }
}

export default OilMixCard

Answer 1

The push method on arrays return the added value rather than the final array. In your addOilToRecipe method, its the string in reference oil that gets set to this.state.recipie, when you do the following:

this.setState({ recipe: this.state.recipe.push(oil) });

Now when you call map on the string, you get individual numeric indexes.

Instead do something like this:

this.setState({ recipe: [...this.state.recipe, oil] });