How can i get access to component fields - React JS

Question

I got little issue with my dropdown component that i imported from 'react-select', i am newbie at React so its pretty hard for me to solve this. i just want to get the selection of user from dropdown list, how can i do that?

for example this is the Dropdown component:

import React from 'react';
import Select from 'react-select';
import 'bootstrap/dist/css/bootstrap.min.css';

const techCompanies = [
  { label: "Button", value: 1 },
  { label: "CheckBox", value: 2 },
  { label: "Color", value: 3 },
  { label: "Date", value: 4 },
  { label: "Local Date time", value: 5 },
  { label: "Email", value: 6 },
  { label: "File", value: 7 },
  { label: "Hidden", value: 8 },
  { label: "Image", value: 9 },
  { label: "Month", value: 10 },
  { label: "Number", value: 11},
  { label: "Password", value: 12},
  { label: "Radio", value: 13},
  { label: "Range", value: 14},
  { label: "Reset", value: 15},
  { label: "Search", value: 16},
  { label: "Submit", value: 17},
  { label: "Telephone", value: 18},
  { label: "Text", value: 19},
  { label: "Time", value: 20},
  { label: "URL", value: 21},
  { label: "Week", value: 22},
];
class DropDown extends React.Component{
    render(){
    return(
  <div className="container">
    <div className="row">
      <div className="col-md-4"></div>
      <div className="col-md-4">
        <Select 
      options={ techCompanies } />
      </div>
      <div className="col-md-4"></div>
    </div>
  </div>
);
}
}
export default DropDown

and now i want to use my dropdown at App.js and show in <h1>{userSelect}</h1> the user selection, i cant find anyway to use pros ans state so i got stuck here:

class App extends Component {
  render() {
    return(
    <div>
    <DropDown/>
    </div>

  );
}
}

Thanks for helping

score 0 · Accepted Answer · answered Feb 29 '20 at 18:36

You have to provide a way for the dropdown to change state. react-select provides a method called onChange that fires off the selected element every time a new one is selected. In order to do this, you'll need to keep track of the currently selected user input in your app component, and you'll need to pass a function down to DropDown so App can change the state whenever a new dropdown element is selected. You can update your code to the following to achieve this:

// DropDown.jsx
class DropDown extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-4" />
          <div className="col-md-4">
            <Select options={techCompanies} onChange={this.props.onChange} /> // add the onChange prop passed from app into Select's onChange API method
          </div>
          <div className="col-md-4" />
        </div>
      </div>
    );
  }
}
export default DropDown;

// App.jsx

import React, { Component } from "react";
import DropDown from "./DropDown";
import "./styles.css";

class App extends Component {
  // you'll need to keep track of the currently selected input
  state = {
    userSelected: ""
  };

  setSelected = selected => {
    console.log(selected) // ex: { label: "Button", value: 1 }
    this.setState({ userSelected: selected.label });
  };

  render() {
    return (
      <div>
        <h1>{this.state.selected}</h1>
        <DropDown onChange={this.setSelected} /> // pass your onChange handler
      </div>
    );
  }
}

export default App;

iamcastelli · Answer 2 · 2020-02-29T19:45:39.080

Like @Keith has said, pass down a prop handler that updates the state of the parent (App) and executes it on selection change in the child(DropDown). React-Select returns an object on selection change so you would have to extract out the label-value pair.

I am using React Hooks here, because hooks are amazing :)

DropDown.js component

import React from "react";
import Select from "react-select";
import "bootstrap/dist/css/bootstrap.min.css";

const techCompanies = [
  { label: "Button", value: 1 },
  { label: "CheckBox", value: 2 },
  { label: "Color", value: 3 },
  { label: "Date", value: 4 },
  { label: "Local Date time", value: 5 },
  { label: "Email", value: 6 },
  { label: "File", value: 7 },
  { label: "Hidden", value: 8 },
  { label: "Image", value: 9 },
  { label: "Month", value: 10 },
  { label: "Number", value: 11 },
  { label: "Password", value: 12 },
  { label: "Radio", value: 13 },
  { label: "Range", value: 14 },
  { label: "Reset", value: 15 },
  { label: "Search", value: 16 },
  { label: "Submit", value: 17 },
  { label: "Telephone", value: 18 },
  { label: "Text", value: 19 },
  { label: "Time", value: 20 },
  { label: "URL", value: 21 },
  { label: "Week", value: 22 }
];

const DropDown = ({ handleSelectionChange }) => {
  // Handler to track changes on selection
  const handleChange = () => selectedValue => {
    handleSelectionChange(selectedValue); // 2. Note that the selectedValue is in the curried param.
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-4" />
        <div className="col-md-4">
          <Select
            options={techCompanies}
            onChange={handleChange()} // 1. make a call to the handler here
          />
        </div>
        <div className="col-md-4" />
      </div>
    </div>
  );
};

export default DropDown;

Call the child DropDown handler handleChange() when the selection changes. Don't forget the parentheses.
Capture the curried value and pass it to the parent by calling the prop handleSelectionChange

App.js component

import React, { useState } from "react";

import DropDown from "./DropDown";

const App = () => {
  const [userSelect, setUserSelect] = useState({});

  const handleChange = selectedValue => {
    // 3. Finally Capture the value from the DropDown here and update the state
    setUserSelect(() => setUserSelect(selectedValue));
  };

  // 4. Extract out the value from the state
  const { label, value } = userSelect;

  return (
    <div className="App">
      {userSelect.value && <h1>{`${value} : ${label}`}</h1>}
      <DropDown handleSelectionChange={handleChange} />
    </div>
  );
}

export default App;

The App's handleChange function receives the value object from DropDown on handleChange via the handleSelectionChange prop and uses it to update its own state.
Note that React-Select stores the selected values as { label: value } pair, so you would need to extract the desired value to display in the UI.

Checkout the Live Sandbox

How can i get access to component fields - React JS

2 Answers2

DropDown.js component

App.js component