Как сделать, чтобы при клике на кнопку появлялось поле ввода?

Question

[Жалил]

Как сделать, чтобы при клике на кнопку, под ней появлялся input, чтобы ввести туда определённую сумму? И ещё проблема в том что, если нажать на radio и после на кнопку, то active на радио не пропадает, просто на всех radio стоит значение и не хотелось бы, чтобы значение из radio складывались при отправке.

const Pay = ()=>{ 
    return(
        <>
             <div className={styles.wrapper}>
          <div className={styles.container}>
         
          <form action="https://app.0xProcessing.com/Payment" method="post">
                          <input type="hidden" name="test" value="true" />
                          <input type="email" name="email" placeholder='Email'/>

                          <div className={styles.choice}>
                             <label><input type="radio" name="amountusd" value={5} /><span>5$</span></label>
                             <label><input type="radio" name="amountusd" value={10}/><span>10$</span></label>
                             <label><input type="radio" name="amountusd" value={15}/><span>15$</span></label>
                             <button>Другая сумма</button>
                          </div>
                    

                          <input type="number" name="amountusd"  placeholder='Другая сумма' />
                          <input type="text" name="currency" placeholder='Валюта' />
                          <input type="hidden" name="ShopId" value="6QsQHcQ6bX" />
                          <input type="hidden" name="ClientId" value={payKey.data} />
                          <input type="hidden" name='SuccessUrl' value={`https://next-js-web-sandy.vercel.app/success/`}/>
                          <input type="hidden" name='AutoReturn' value="true" />
                          <button type="submit">Send</button>
          </form>       
          </div>
         </div>
        </>
    )

}

export default Pay

Comments

[Rerurk]

const [show, setShow]=useState(false)

[Жалил]

Rerurk, сделал, спасибо, но если я нажимаю на 5 потом на Другую сумму, то 5 всё ещё остаётся выбранным, как это убрать?

Вот как я сделал

const [show, setShow] = useState(false);

    const handleClick = () =>{
      setShow(!show);
    }
    return(
        <>
             <div className={styles.wrapper}>
          <div className={styles.container}>
         

             <div className={styles.choice}>
                  <label><input type="radio" name="amountusd" value={5} /><span>5$</span></label>
                  <label><input type="radio" name="amountusd" value={10}/><span>10$</span></label>
                  <label><input type="radio" name="amountusd" value={15}/><span>15$</span></label>
                  <label><input  onClick={handleClick} type="radio" /><span className={styles.button}>Другая сумма</span></label>
             </div>
      
              <div  className={`${styles.dropdownContent} ${show ? styles.show : ""}`}>
               <input  type="number" name="amountusd"  placeholder='Другая сумма' />
               </div>

Answer 1

[0xD34F]

const amounts = [ 5, 10, 15 ];
const [ amount, setAmount ] = useState(null);
const [ isCustomAmount, setIsCustomAmount ] = useState(false);

{amounts.map(n => (
  <label>
    <input
      type="radio"
      disabled={isCustomAmount}
      checked={amount === n && !isCustomAmount}
      onChange={() => setAmount(n)}
    />
    ${n}
  </label>
))}
<label>
  <input
    type="checkbox"
    checked={isCustomAmount}
    onChange={e => (setAmount(null), setIsCustomAmount(e.target.checked))}
  />
  Другая сумма
</label>
{isCustomAmount && <input value={amount} onChange={e => setAmount(+e.target.value)} />}
<input type="hidden" name="amountusd" value={amount} />

Comments

[Жалил]

0xD34F большое спасибо за решение, но как мне дать key при map?

[0xD34F]

jalilko05, можете использовать сами значения сумм - <label key={n}>.

[Жалил]

0xD34F, так и попробовал до вашего ответа, но выдаёт

Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

[0xD34F]

jalilko05, убил бы. При чём тут key?

Читаете сообщение, осознаёте, что там сказано, исправляете код.

[Жалил]

0xD34F, зачем сразу убивать, думал что ошибка именно key, прошу прощения : ( В любом случае спасибо за ответ