React error : TypeError: props.globalChange is not a function

user_17124143 0
Viewed 773

I am having a problem in props sending in the same component and the function is not function issue coming. So how to solve the issue?

import React, { useState } from 'react';

export default function Lifting() {
    const [data, setData] = useState(0);
    function globalChange(items) {
        setData({ data: items });
    }
    return (
        <div>
            <h1>Lifting State Up</h1>
            <LiftingChild val={data} onChange={globalChange} />
            <br />
            <LiftingChild val={data} onChange={globalChange} />
        </div>
    )
}

function LiftingChild(props) {
    return (
        <div>
            <input value={props.val} onChange={(e) => { props.globalChange(e.target.value) }} />
        </div>
    )
}
react-hooks reactjs html javascript
1 Answers

It's just a naming issue. When you used the LiftingChild component you add globalChange as the onChange prop but in the LiftingChild component you try to call globalChange that doesn't exist. You need to call it as props.onChange.

<input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />

EDIT: This exposes that the way the setData was being called is also incorrect. You're setting the new state to be an object but it should just be the number so it can continue to be used at the state of the form.

function globalChange(item) {
        setData(item);
    }

Note that because both child components use the same piece of state, updating one will update both. This could be desirable or not depending on the use-case.

Putting it all together it should look like so:

const { useState } = React;

function Lifting() {
    const [data, setData] = useState(0);
    function globalChange(items) {
        setData(items);
    }
    return (
        <div>
            <h1>Lifting State Up</h1>
            <LiftingChild val={data} onChange={globalChange} />
            <br />
            <LiftingChild val={data} onChange={globalChange} />
        </div>
    )
}

function LiftingChild(props) {
    
    return (
        <div>
            <input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />
        </div>
    )
}

ReactDOM.render(<Lifting />, document.getElementById('react'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

user_29076060
Related