I am new to React.
I am using Bootstrap to render my page. All the other tags seem to be working apart from the InputGroup.Text. It doesn't render the id attribute of the text field. It looks as below if I inspect the element:
<input placeholder="Type your question here" class="form-control">
I have tried directly entering "1" as the id and that doesn't render either.
<InputGroup size="sm" className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id={ans.answerno}>{this.mapAlpha(ans.answerno)}</InputGroup.Text>
</InputGroup.Prepend>
<FormControl placeholder="Type your answer here" />
<Form.Check type="checkbox" id={ans.answerno} label="mark answer" />
</InputGroup>
I have checked the documentation online and this seems to me how it should work. Can anyone advise?
It seems like the id is located inside a span before the <input>.
Even checking the documentation rendered code
Related
How would I go about creating refs on child components created by a map function?
So I'm trying to use
"#react-google-maps/api"
to create input fields wrapped by google's autocomplete. However I'm running into an issue where I want to allow the user to create inputs (to add waypoints) and the only way to get their input into an arry is by using refs
<div className={style.form}>
<Autocomplete>
<input type="text" id="from" ref={originRef} placeholder="Enter Starting Location"/>
</Autocomplete>
{wayPoints.map((input, index) => {
return(
<Autocomplete key={index} onChange={e => handleInputChange(index, e)}>
<input type="text" id="from" placeholder="Enter Stop"/>
</Autocomplete>
)
})
}
<Autocomplete>
<input type="text" id="from" ref={destinationRef} placeholder="Enter Ending Location"/>
</Autocomplete>
<div className={style.add} onClick={addNewStop}>
<FaPlus/>
</div>
</div>
However since I'm creating child compoents I'm not sure how to use refs to solve the problem. I tried using a onChange handler function but if you click on the autocomplete recommendation it doesnt save.
I've got a React web app using bootstrap 4 and Reactstrap. I want to have several checkboxes in a toolbar and I can't figure out how to get anything out of the onChange event besides "on".
Here is my code that continues to write "on" to the console every time I click the checkbox. The checkbox does toggle on and off.
<li className="show-sessions">
<FormGroup check>
<Label check>
<Input
type="checkbox"
onChange={(e) => console.log(e.target.value)}
/>{" "}
<strong>Show Favorites</strong>
</Label>
</FormGroup>
</li>
Is there another way to make a checkbox in Reactstrap? The doc's are very limited.
you can check checked state rather than value; it is a boolean
<Input
type="checkbox"
onChange={(e) => console.log(e.target.checked)}
/>
I am using a React redux-form input and this is my code:
return (
<Field
key={name}
component={SurveyField}
type="text"
label={label}
name={name}
autocomplete="off"
/>
);
I don't want chrome to autoComplete the form.
I have tried both but none working.
autocomplete="off"
autoComplete="off"
I suppose Chrome just ignores the autoComplete. I have seen the other StackOverflow questions but they are not helpful.
I find that adding the autocomplete property to the <input autoComplete="off"/> tag defined in your component callback function rather than depending on the redux-form <Field /> tag to pass this property to DOM will properly set this property in the html generated and autocomplete="off" will work as expected.
I have a react sign-up form. I want to set up an input (checkbox) that holds the value as some text - e.g:
<form onSubmit={this.validateStepTwo} id="registerForm">
<label htmlFor="short_bio">Tell the users a bit about yourself:</label>
<input type="textarea" name="short_bio" className="textarea-small"/>
<label htmlFor="bio_info">Tell the users who you are</label>
<input type="textarea" name="bio_info" className="textarea-large"/>
<label htmlFor="bio_exp">Tell the users what you did</label>
<input type="textarea" name="bio_exp" className="textarea-large"/>
<input type="checkbox" name="instructor" value="I want to be an instructor" />
<input type="submit" value="Register" className="submit"></input>
{this.state.errors !== null ? (
<h1 className="error">{this.state.errors}</h1>
) : ('')}
</form>
Where
<input type="checkbox" name="instructor" value="I want to be an instructor" />
should have a value of "I want to be an instructor" but it doesnt have anything.
I tried doing it like this:
<input ...>I want to be an instructor</input>
but that threw another error.
Is this a react thing or am i missing something in my code? Ive been on the computer for 13 hours so i wouldnt be surprised if i made a dumb mistake.
Checkbox input value is the one sent in the request and not the text that appears afterwards.
If you want it to be the text then do something like this
<input type="checkbox" name="instructor" value="instructor"> I want to be an instructor
I want to add a in a react semantic UI
but it cannot send the checked value to server even after I name Checkbox like this:
<Form.Field
label="The question is new to the intent library"
name="newType"
control={Field}
component={Checkbox}
/>
This component is inside a form like this:
<Form>
<Form.Field
label="Rating"
control={Field}
name="rate"
component={Rating}
...
/>
<That checkbox ... />
<Form.Field
label="Comment"
control={Field}
name="comment"
component="textarea"
/>
</Form>
Supposed action should carry the checked value in payload, similar to how rating and comment are carried.
I am stuck in this for half a day
Please help me if you notice something. Thanks!
The problem is solved by using the following code
<Form.Field
control={Field}
label="The question is new to the intent library"
name="newType"
component="input"
type="checkbox"
/>