React set default value for select

Question

This is my SearchForm.js class, period is a select list

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class SearchForm extends React.Component {

        constructor(props) {
            super(props)

            this.state = {
                position: '',
                area: '',
                period: '',
                experience: {
                    type: Array,
                    default: () => []
                }
            }
            this.handlePeriodChange = this.handlePeriodChange.bind(this);
        }


        handlePeriodChange(e) {
            this.setState({
                [e.target.name]: e.target.value
            });
        }      

        render() {
            return ( <
                form className = 'form search-form'
                onSubmit = {
                    this.handleSubmit
                } >
                <
                div className = "form-row" >

                    <
                    div className = "form-group col-md-2" >
                    <
                    label htmlFor = "period" > Period *< /label> <
                    select className = "form-control"
                    name = "period"
                    id = "period"
                    onChange = {
                        this.handlePeriodChange
                    }
                    value = {
                        this.state.period
                    } >
                    <
                    option value = "1" > 1 < /option> <
                    option value = "3" > 3 < /option> <
                    option value = "7" > 7 < /option> <
                    option value = "30" > 30 < /option> < /
                    select > <
                    /div> < /
                    div >


                    <
                    div className = "form-row" >
                    <
                    div className = "form-group col-md-12 pt-3" >
                    <
                    input id = 'form-button'
                    className = 'btn btn-primary'
                    type = 'submit'
                    placeholder = 'Send' / >
                    <
                    /div> < /
                    div > <
                    /form>
                )
            }
        }

        export {
            SearchForm
        }

How to set defult value for period select ?

Answer 1

Provide a default value in state for the select option

 this.state = {
            position: '',
            area: '',
            period: '1',
            experience: {
                type: Array,
                default: () => []
            }
        }
       ...
 <select 
      className = "form-control"
      name = "period"
      id = "period"
      onChange = {this.handlePeriodChange}
      value = {this.state.period
      }
 >
      <option value = "1" > 1 < /option> 
      <option value = "3" > 3 < /option> 
      <option value = "7" > 7 < /option> 
      <option value = "30" > 30 < /option>
 < /select >

or add a defaultValue attribute to select like

 <select 
      className = "form-control"
      name = "period"
      id = "period"
      defaultValue="1"
      onChange = {this.handlePeriodChange}
      value = {this.state.period}
 >
      <option value = "1" > 1 < /option> 
      <option value = "3" > 3 < /option> 
      <option value = "7" > 7 < /option> 
      <option value = "30" > 30 < /option>
 < /select >