Warning: use the `defaultvalue` or `value` props on instead of setting `selected` on . 25 September 2023 by thecoderscamp.com The warning message “use the `defaultvalue` or `value` props on instead of setting `selected` on.” appears when the `selected` attribute is used on the `` element within a `` element in ReactJS. The correct way to handle default selection in a `` element in ReactJS is to use either the `defaultValue` or `value` props on the `` element itself. Here are examples of using `defaultValue` and `value` props to handle default selection in a `` element:

Example 1 using defaultValue prop:

        
            {`
    Option 1
    Option 2
    Option 3
`}
        
    

Example 2 using value prop:

        
            {`class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { selectedOption: 'option2' };
    }
    
    render() {
        return (
            
                Option 1
                Option 2
                Option 3
            
        );
    }

    handleSelectChange(event) {
        this.setState({ selectedOption: event.target.value });
    }
}`}
        
    

In the first example, the `defaultValue` prop is set to “option2” which makes the “Option 2” the default selected option when the component is rendered.

In the second example, the `value` prop is bound to the `selectedOption` state variable. When the component is rendered, the current value of `selectedOption` is used as the default selected option. The `onChange` event handler updates the `selectedOption` state whenever a different option is selected.

Both approaches ensure the correct default selection in a `` element without triggering the warning or breaking the ReactJS convention. Read more 1 error in child compilations (use ‘stats.children: true’ resp. ‘–stats-children’ for more details) No such xattr: com.apple.quarantine Jwt strings must contain exactly 2 period characters. found: 0 Cannot find module ‘@babel/plugin-proposal-private-property-in-object’ Categories Blog, Programming Question Is in unnamed module of loader ‘app’Typeerror: cannot read properties of undefined (reading ‘flags’) Leave a comment Cancel replyComment

Name Email Website

Save my name, email, and website in this browser for the next time I comment.