React: Employee Information
Create an Employee Information module as shown below:
There is a reusable component in the module named Dropdown:
- It renders a <select> element.
- It receives 3 props:
- labelText – used to render the default option in the dropdown
options – This is an array of strings where each object is rendered as an option in the dropdown. Each option should have a value equal to object instance (string).
onChange – The onChange function to be called on option selection to pass the selected value to the parent.
The module must have the following functionalities:
- It renders 2 Dropdown components.
- The first Dropdown component is used to render country options. When a country is selected it should be rendered as:
<label data-testid="country-selected"> Country Selected: <selectedCountry> </label> The second Dropdown component is used to render language options. When a language is selected it should be rendered as:
<label data-testid="language-selected"> Language Selected: <selectedLanguage> </label>
The following data-testid attributes are required in the component for the tests to pass:
- The div containing country options dropdown: ‘country-options’
- The div containing language options dropdown: ‘language-options’
- The label rendering selected country: ‘country-selected’
- The label rendering selected language: ‘language-selected’
- Inside the Dropdown component select element: ‘dropdown’
Please note that the component has the data-testid attributes for test cases, certain classes and ids for rendering purposes. They should not be changed.
Solution:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Dropdown extends Component {
render() {
const { labelText, options, onChange } = this.props;
return (
<select data-testid="dropdown" onChange={onChange}>
<option value="">{labelText}</option>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</select>
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedCountry: '',
selectedLanguage: '',
};
}
handleCountryChange = (event) => {
this.setState({
selectedCountry: event.target.value,
});
};
handleLanguageChange = (event) => {
this.setState({
selectedLanguage: event.target.value,
});
};
render() {
const countries = ['USA', 'Canada', 'UK', 'Australia'];
const languages = ['English', 'Spanish', 'French', 'German'];
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div data-testid="country-options">
<Dropdown
labelText="Select Country"
options={countries}
onChange={this.handleCountryChange}
/>
<label data-testid="country-selected">
Country Selected: {this.state.selectedCountry}
</label>
</div>
<div data-testid="language-options">
<Dropdown
labelText="Select Language"
options={languages}
onChange={this.handleLanguageChange}
/>
<label data-testid="language-selected">
Language Selected: {this.state.selectedLanguage}
</label>
</div>
</div>
);
}
}
export default App;