Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Im having trouble in React transferring data from a component to a sub component

Im working in react for the first time and ive got an app that takes two numbers from the user and has them select an operator. i want to take that info and display it in a sub component but i can get it for the life of me.

<script type="text/babel">
        const main = ReactDOM.createRoot(document.getElementById('root'));
            function Inputs(props) {
            const[val1, setVal1] = React.useState(props.num1);
            const[val2, setVal2] = React.useState(props.num2);
            let symbols = ['+', '-', 'x', '÷'];
            const[sym, setSym] = React.useState(props.opp);
            const getVal = () => {
                setVal1(first.value);
                setVal2(second.value);
            }
            const getSym = (num) => {
                setSym(symbols[num])
            }
            return(
                <div>
                    <input id= 'first'></input>
                    <input id= 'second'></input>
                    <p>{val1}</p>
                    <p>{val2}</p>
                    <p>{sym}</p>
                    <button id= 'get' onClick ={getVal}>get</button>
                    <button id= 'add' onClick ={() => getSym(0)}>+</button>
                    <button id= 'subtract' onClick ={() => getSym(1)}>-</button>
                    <button id= 'multiply' onClick ={() => getSym(2)}>x</button>
                    <button id= 'divide' onClick ={() => getSym(3)}>÷</button>
                    <SubComponent />
                
            </div>
           )
        }
        
        class SubComponent extends React.Component {
            render() {
                return(
                    <p>SubComponent{this.props.value}</p>
                )
            }
        }
        main.render(<Inputs />);

Ive tried using props and a few other things but no dice

Tags:

3

Answers


  1. 0

    I can see you are not passing any props while calling the "SubComponent" but trying to access like :

    class SubComponent extends React.Component {
            render() {
                return(
                    <p>SubComponent{this.props.value}</p>
                )
            }
        }

    Instead you should be passing the props to your "SubComponent" like <SubComponent value={{val1, val2, sym}} /> and then try accessing them like

    class SubComponent extends React.Component {
    render() {
        const { val1, val2, sym } = this.props.value;
        return (
            <div>
                <p>Value 1: {val1}</p>
                <p>Value 2: {val2}</p>
                <p>Symbol: {sym}</p>
            </div>
        );
    }
}
    Login or Signup to reply.
  2. 0

    you can try redux , redux is a powerful Library for sharing data one component to all completes like child to parent, parent to childs, child to child etc

    Login or Signup to reply.
  3. 0

    Sure, here’s a shorter and more concise answer:

    To pass data from your Inputs component to the SubComponent, you need to pass props correctly. Update your code like this:

    function Inputs() {
    const [val1, setVal1] = React.useState('');
    const [val2, setVal2] = React.useState('');
    const [sym, setSym] = React.useState('');

    const getVal = () => {
        setVal1(document.getElementById('first').value);
        setVal2(document.getElementById('second').value);
    }

    const getSym = (num) => {
        setSym(['+', '-', 'x', '÷'][num]);
    }

    return (
        <div>
            <input id='first' />
            <input id='second' />
            <button onClick={getVal}>Get</button>
            <button onClick={() => getSym(0)}>+</button>
            <button onClick={() => getSym(1)}>-</button>
            <button onClick={() => getSym(2)}>x</button>
            <button onClick={() => getSym(3)}>÷</button>
            <SubComponent val1={val1} val2={val2} sym={sym} />
        </div>
    )
}

class SubComponent extends React.Component {
    render() {
        const { val1, val2, sym } = this.props;
        return (
            <div>
                <p>Value 1: {val1}</p>
                <p>Value 2: {val2}</p>
                <p>Operator: {sym}</p>
            </div>
        )
    }
}

const main = ReactDOM.createRoot(document.getElementById('root'));
main.render(<Inputs />);

    This should fix the issue with passing data to your sub-component.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search