react select npm

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

class App extends React.Component {
  state = {
    selectedOption: null,
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;

    return (
      
    );
  }
}
 Here is what the above code is Doing:

1. We’re importing the Select component from react-select.

2. We’re creating an array of options for our select field.

3. We’re creating a state variable called selectedOption.

4. We’re creating a handleChange function that will update the selectedOption state variable.

5. We’re rendering a Select component.

6. We’re passing the selectedOption state variable to the value prop.

7. We’re passing the handleChange function to the onChange prop.

8. We’re passing the options array to the options prop.




 



Similar Posts
 











 





Javascript Examples 

vector

ByAnurag batra 
July 1, 2022June 30, 2022 



In mathematics, physics and engineering, a Euclidean vector is a geometric object that has magnitude and direction. Vectors can be added to other vectors according to vector algebra Examples include: 1.)displacement 2.)velocity 3.)position 4.)force 5.)torque Here is what the above code is Doing: 1.)We are creating a class called Vector 2.)We are creating a constructor…












 





Javascript Examples 

how to create variables using javascript

ByAnurag batra 
August 2, 2022June 30, 2022 



var x = 5; // assign the value 5 to x Here is what the above code is Doing: 1. We create a variable called x and assign it the value of 5. 2. We create a variable called y and assign it the value of 10. 3. We create a variable called z and…












 





Javascript Examples 

i18n react meta description

ByAnurag batra 
July 12, 2022June 30, 2022 



import { useIntl } from ‘react-intl’; const DescriptionMeta = () => { const { formatMessage: f } = useIntl(); return ( ); }; Here is what the above code is Doing: 1. We’re importing the `useIntl` hook from `react-intl`. 2. We’re using the `useIntl` hook to get the `formatMessage` function. 3. We’re using the `formatMessage`…












 





Javascript Examples 

Returning Boolean Values from Functions

ByAnurag batra 
July 7, 2022June 30, 2022 



function isLess(a, b) { //avoid this code if (a < b) { return true; } else { return false; } // There is a better way to do this return a < b; } Here is what the above code is Doing: 1. It's defining a function called isLess. 2. It's taking two parameters, a...













 





Javascript Examples 

ngrok angular 8

ByAnurag batra 
July 4, 2022June 30, 2022 



ngrok http –host-header=rewrite 4200 Here is what the above code is Doing: 1. ngrok http 4200 – tells ngrok what port your local server is running on 2. –host-header=rewrite – instructs ngrok to rewrite the host header to the public URL it’s forwarding traffic to.












 





 Javascript Examples 

expressjs create encrypted password

ByAnurag batra 
July 29, 2022June 30, 2022 



// To encrypt passwords use bcrypt >> npm install bcrypt const bcrypt = require(‘bcrypt’); bcrypt.hash(‘somePassowrd’, 12).then(hash => { console.log(hash); }); Here is what the above code is Doing: 1. We’re requiring the bcrypt package. 2. We’re calling the hash() method on the bcrypt object. 3. The hash() method takes two arguments: the password we want…