Somewhat new to react and having trouble passing multiple state values to an input.
Specifically, state from drop-down menus. I can accomplish this in a p tag by chaining the various state values together.
This works
<p>
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
</p>
This will return
one_two_three_four_five
Whenever I try to pass these same values into a single input I get an error.
This does not work
<label>
Title:
<input
value=
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
type="text" />
</label>
How can one pass multiple state values into a single input?
Template literals with variables :
<input
value={ `${this.state.one}_${this.state.two}` }
/>
You have to pass a single expression to the value attribute. Change to this:
<label>
Title:
<input value={`${this.state.one}_
${this.state.two}_
${this.state.three}_
${this.state.four}_
${this.state.five}`
}
type="text" />
</label>
Note: this is ES6 string interpolation. The ES5 alternative is the regular string concatenation with "+"
Related
pattern="[a-zA-Z ]*"
im trying to limit the input to be only letters no numbers or symbols should be allowed
but the given code is not working
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
defaultValue={kardName}
/>
i have also tried to use onChange method but it wasn't working too
anyhelp would be highly apperciated
The pattern attribute specifies a regular expression that the element's value is checked against on form submission.
You can see from the snippet below, that if you hit submit, the pattern is checked and it's actually working.
<form>
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
/>
<input type="submit" />
</form>
If you want to prevent the user from inserting some character, the pattern attribute won't help you.
What You can do is check the character inside the onKeyDown function, and prevent the insertion there. Something like this:
const onKeyDown = (event) => {
if (!event.key.match(/[A-Za-z ]/)) {
event.preventDefault()
}
...
<input
name="cardName"
type="text"
required
onKeyDown={onKeyDown}
/>
How can I test for the type of the input field in the JSX of my react component?
For example, lets say the following is a part of JSX:
<form>
<input type="number" name="testfield" />
</form>
Now I want to write a test case that which should check if the type of the input field is a number or not?
Say you have :
<form >
<input type='text' name='name' id='name' onChange={this.handleChange}/>
</form>
You can create a function in the class like :
handleChange(event){
console.log(event.target.type) // Use this to compare the type.
if ( event.target.type == 'number' ) {// Your case }
}
You can also use event.target to compare different properties like the name(event.target.name), etc.
In case you have multiple elements inside the <form> start by comparing the names of the target so you know what element was changed since we may be using the same handler for each element.
You can use css selectors to find the element in the component, and assert its existence.
expect(wrapper.find('input[name="testfield"][type="number"]')).toHaveLength(1);
I have an input whose value I want to store in a React variable.
<div>
<label>Nombre Completo: </label>
<input style={eachBit} required id='name' type='text' placeholder='Zeus Aurel'></input>
</div>
Without the complications of constructor or classes, I can't find anything useful anywhere. I know nothing of reactjs, please help.
onChange event allows value to be stored in state. Here is how input value is stored in a state named inputValue.
<input
onChange={e => this.setState({ inputValue: e.target.value }))
/>
Are you asking about the way to change/insert a HTML element as a variable ?
Hope this topic can help you : Insert HTML with React Variable Statements (JSX)
I'm trying to get some values from the JSON array on some http-address. Therefore, when I put from the map in the input field, I got an Object instead of a value. Outside the input field, it works fine.
<FormGroup>
<Label for="description">Description</Label>
<Input type="text" name="description" id="description" value={Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}
onChange={this.handleChange} autoComplete="description"/>
</FormGroup>
{Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}
Inside <FormGroup> I got the Object. External is a necessary value.
What am I doing wrong?
currently JSX transpiler converts <p>... into React component (object) and then passes it into input as its value. To display variable's content browser calls .toString() method. so finally you see "[Object object]" there. Depending on your needs you need different changes made.
Say if you expect to see HTML markup inside input(like a string) you should make it string(say using template strings):
.map(el => `<p>....`
Or you just should not put it into <input value if you need to see it as live HTML markup
How can I make the following work in React?
<input type="text" placeholder=" Location" />
I looked at dangerouslySetInnerHTML but that is not for setting props such as placeholder
You can use a JS string with escape sequence (I don't know what character U+f124 is so I substituted U+00C2 [Â], but it can be whatever code point):
<input type="text" placeholder={"\u00C2 Location"} />