1

I am new to SharePoint framework and React JS.

I have build a basic Web Part with CRUD operation using React JS.

I wanted to show drop-down(html select) value on Page Load in an alert. I am able to get an alert on page load but not able to figure out how to get html select value in that alert.

Please advice.

Here is my code for getting alert on page load.

componentDidMount() {   
  alert("Hi");
}



public render(): React.ReactElement<IReactCrudProps> {   
    return ( 
        <select id="myDDl">

        </select>
    );
} 
5
  • Which drop-down value? Do you have any drop-down in your web part? If Yes, please add HTML code. Jul 19 '19 at 9:15
  • edited my question to add the render method with dropdown(select html) code
    – user85476
    Jul 19 '19 at 9:31
  • Have you mapped the select options from state or stored selected value in state? See this, it might help you. Jul 19 '19 at 9:39
  • you cannot display custom html in alert...alert is javascript method...to display dropdown in popup, use some either jquery/bootstrap or react popup... Jul 19 '19 at 9:41
  • He/she want to show the drop-down(html select) value. not drop-down. If he/she can get the drop-down value in componentDidMount function maybe using React state or some javascript then he/she can show it in an alert. Jul 19 '19 at 9:46
0

This is how I was able to do it:

import * as React from 'react';
import styles from './Reactspfx.module.scss';
import { IReactspfxProps } from './IReactspfxProps';
import { escape } from '@microsoft/sp-lodash-subset';
 export interface IReactGetItemsState{ 
selectValue:string
}
export default class Reactspfx extends React.Component<IReactspfxProps, 
  IReactGetItemsState> {
public constructor(props: IReactspfxProps) {
super(props);
this.state = {
  selectValue:"Radish"
};

}

 handleChange = (event) => {
this.setState({selectValue:event.target.value});
alert(event.target.value);
};

 public render(): React.ReactElement<IReactspfxProps> {
alert(this.state.selectValue);
return (
  
  <select value={this.state.selectValue}  onChange={this.handleChange}>
    <option value="Orange">Orange</option>
      <option value="Radish">Radish</option>
      <option value="Cherry">Cherry</option>
    </select>
);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.