Boa tarde prof, estou tentando colocar um placeholder no options só que eu não estou conseguindo, já tentei de todo jeito aqui, vou mandar o código vc me diz se é possível, ou oq eu to fazendo de errado
import './ListaSuspensa.css'
const ListaSuspensa = (props) => {
const placeholderModificada = `${props.placeholder}...`
return (
<div className='lista-suspensa'>
<label className='lista-suspensa__label'>
{props.label}
</label>
<select className='lista-suspensa__select'>
{props.itens.map(item =>
<option required = {props.obrigatorio} key={item} placeholder= {placeholderModificada} >{item}</option>
)}
</select>
</div>
)
}
export default ListaSuspensa
import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'
const Formulario = () => {
const times = [
'Programação',
'Front-end',
'Data Science',
'Devops', 'Mobile',
'Inovação e Gestão'
]
const aoSalvar = (evento) => {
evento.preventDefault();
console.log('O form foi submetido')
}
return (
<section className="formulario">
<form className='formulario__campos' onSubmit={aoSalvar}>
<h2>Preencha os dados para criar o card do colaborador</h2>
<CampoTexto obrigatorio = {true} label="Nome" placeholder="Digite seu nome" />
<CampoTexto obrigatorio = {true} label="Cargo" placeholder="Digite seu cargo" />
<CampoTexto obrigatorio = {true} label="Imagem" placeholder="Digite o endereço da imagem" />
<ListaSuspensa obrigatorio = {true} label="Time" itens = {times} placeholder = "Selecione seu cargo" />
<Botao>
Criar Botao
</Botao>
</form>
</section>
)
}
export default Formulario
O único jeito que eu consegui foi colocando ele como opção na lista
const times = [
'Selecione seu cargo',
'Programação',
'Front-end',
'Data Science',
'Devops', 'Mobile',
'Inovação e Gestão'
]
só que eu queria um jeito melhor de fazer isso