I have a select with an option called "+ Create new"
When the user clicks on this option, I am displaying a modal to create a new option. However, I do not want this select option to show "+ Create new" after it is clicked.
How can I make the option "clickable" but prevent it from appearing in the select's 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 don't allow it to be shown as the select's option when clicked -->
</Input>
</Fragment>
);
};
export default TestComponent;
The code below considers the accepted answer and adds functionality for mapping over an array and rendering multiple Inputs with type="select" that do not display the "+ create new" option:
Note: the id is updated to .id={`selectHeader${index}`} and the onChange is updated to
document.getElementById(`selectHeader${index}`).value= "";<Table responsive bordered striped hover>
<thead>
<tr>
{
fileContacts.map((contact, index) => (
<th className="bg-primary pr-1 pl-1 pt-2 pb-2 overflow-hidden" scope="col" key={index}>
<Input
type="select"
className="fs--1"
name="selectHeader"
id={`selectHeader${index}`}
onChange={({ target }) => {
if(target.value === "+ Create new") {
document.getElementById(`selectHeader${index}`).value= "";
setShowFieldModal(!showFieldModal)
} else {
setUpload({...upload, selectHeader: [...upload.selectHeader, {value: target.value, index: index}]})
}
}}
>
<option>First name</option>
<option>Last name</option>
{ fields.map((field, index) => (
<option key={index} >{field.title}</option>
))}
<option>+ Create new</option>
</Input>
</th>
))}
</tr>
</thead>
<tbody>
{
upload.contacts.slice(0, 10).map((customer, index) => (
<TableRow data={customer} key={index}/>
))
}
</tbody>
</Table>