make select option clickable, but keep it from populating the select input view-CodePudding

I have a select with an option called " Create new"

When the user clicks on this option, I am showing a modal to create a new option, however I do not want this select option to render create new after the option is clicked.

How can I keep the option "clickable" but keep it from populating the selects actual input view?

here is the component

import React, {useState} from 'react';
import { Input } from 'reactstrap'

const TestComponent = () => {

const [upload, setUpload] = useState({
selectHeader: []
})

 const [showFieldModal, setShowFieldModal] = useState(false);

return (
              <Fragment>
                <Input
                  type="select"
                  name="selectHeader"
                  id="selectHeader"
                  onChange={({ target }) => {
                    if(target.value === "  Create new") {
                      setShowFieldModal(!showFieldModal)
                    } else {
                      setUpload({...upload, selectHeader: [...upload.selectHeader, {value: target.value, index: index}]})
                    }
                  }}
                 >
                   <option>First name</option>
                   <option>Last name</option>
                 
                    <option>  Create new</option> // make this clickable but dont allow it to show as the selects option when clicked....
                 </Input>
                </Fragment>
);
};

           export default TestComponent;

CodePudding user response：

try, you need to empty the select value after clicking on the option, this might help you

onChange={({ target }) => {
     if(target.value === "  Create new") {
        document.getElementById('selectHeader').value= " " ;
        setShowFieldModal(!showFieldModal)
     } else {
        setUpload({...upload, selectHeader: [...upload.selectHeader, {value: 
        target.value, index: index}]})
     }
}}