0

I am trying to pass attributes from SELECT button (children component) to the Parent component. I am trying to console log the attributes but when I load the app and console log (this.props) I just receive {} and the object without attribute values just with methods. Can anyone help me as I am new with React. I am doing anything wrong? Can I pass props like that?Thanks in advance Parent component:

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import FilterMenu from "./selectButton";
import FetchRandomBet from "./fetchRandomBets";

class Betslip extends Component {

    render() {
        console.log("props", this.props);
        return (

            <div className="betslip">

                <div className="betslip-top">
                    <h1 className="text">BETSLIP</h1>
                    <p className="text-two">BET WITH US!</p>
                    <div>
                        <FilterMenu />
                    </div>
                </div>

                <div>
                    <FetchRandomBet />
                </div>

                <Button className="betnow" variant="contained">
                    Bet Now!
                </Button>
            </div>
        );
    }
}

export default Betslip;

children component:

import React, { useState } from 'react';
import Select from 'react-select'

function FilterMenu() {
    const data = [
        {
            value: 0,
            label: "No Filter"
        },
        {
            value: 1,
            label: "Less than two"
        },
        {
            value: 2,
            label: "More than two"
        },
    ]
    const [selectedValue, setSelectedValue] = useState(null);

    const handleChange = obj => {
        setSelectedValue(obj);
    }

    return (
        <>
            <Select
                options={data}
                value={selectedValue}
                onChange={handleChange}
            />
            {/* <h1>{JSON.stringify(selectedValue, null, 1)}</h1> */}
        </>
    )
}

export default FilterMenu;
Ken Utterson
  • 1
  • 2
    You're console.logging in the parent component `Betslip` but you don't show us what renders that. You're not passing props with ``. You also don't pass any props to your child component with ``. You must explicitly pass props using JSX syntax – Andy Ray Apr 23 '21 at 19:29
  • Thanks Andy for answering. Could you explain it to me better, please? – Ken Utterson Apr 23 '21 at 19:33
  • How should I pass props between the two components? – Ken Utterson Apr 23 '21 at 19:34
  • Oh, you're trying to go from child to parent. This is a duplicate of https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs – Andy Ray Apr 23 '21 at 19:35
  • Read it. But I did not understand much.In few words I need to pass as props from the children component the attribute value={selectedValue} to which is in the Parent component. I would like to display the attributes of – Ken Utterson Apr 23 '21 at 19:54

0 Answers0