How to get input on button click with reactstrap

Question

I have an input field and when the button is clicked I would like to store the input to a variable and output it to console. Here is my code:

function InputDD() {
       const [inputValue, setInputValue] = useState('');
       const onChangeHandler = event => {
           setInputValue(event.target.value);
       };
       //console.log(inputValue) <- Not working
     
       return(
       <div>
       <Form>
           <FormGroup>
                <Input type="lk" name="inputK" id="inputK" className="ink" value={inputValue} onChange={onChangeHandler} /> 
           </FormGroup>
           <Button size="sm" className="nextbtn">Lets roll</Button>
<!--Not working -> <Button size="sm" className="nextbtn" onClick={console.log(inputValue)}>Lets roll</Button>-->
       </Form>
       </div>
       )
}

export default InputDD;

Currently, whenever an input is entered, the keys are output in console like in this image:

I do not want this and only want the whole text that is input stored to a variable and printed to console when the button is clicked.

Wellington Ostemberg · Accepted Answer · 2021-08-28 18:38:38Z

1

    function InputDD() {
           const [inputValue, setInputValue] = useState('');
           const onChangeHandler = event => {
               setInputValue(event.target.value);
           };
           const handleSubmit = (e) => {
              e.preventDefault()
              console.log(inputValue) //working
           }
    
           
         
           return(
           <div>
           <Form onSubmit={(e) => handleSubmit(e)}>
               <FormGroup>
                    <Input
type="lk" 
name="inputK" 
id="inputK" 
className="ink" 
value={inputValue} 
onChange={(e) => onChangeHandler(e)} 
/> 
               </FormGroup>
               <Button size="sm" className="nextbtn">
Lets roll
</Button>
    <Button size="sm" className="nextbtn" type="submit">
Lets roll
</Button>
           </Form>
           </div>
           )
    }
    
    export default InputDD;

edited Aug 28, 2021 at 18:38

answered Aug 28, 2021 at 18:28

Wellington Ostemberg

203 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get input on button click with reactstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related