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"} />
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}
/>
I am trying to display text from my database. The <p> doesn't show the expected newlines but <textarea> does.
I want to use it like this <p>{course.overview}</p>.
When I use this one <textarea type="text" placeholder={course.overview} className="form-control color-black overflow:scroll" name="overview" rows="95" disabled/> it keeps the format.
It's not exactly what I want but it's better than <p>{course.overview}</p>.
What can I do?
I tried to use same className in <textarea type="text" placeholder={course.overview} className="form-control color-black overflow:scroll" name="overview" rows="95" disabled/>
with
<p className="form-control color-black overflow:scroll" >{course.overview}</p> but it changes nothing.
Pictures for example textarea= https://ibb.co/zSmmHrT AND p = https://ibb.co/1L07Dfk
Thanks in advance ! :)
Instead of using the <p> tag you could use the <pre> tag if it's plain text. Otherwise you would need to convert all your newlines with <br>
More about the issue here: https://www.w3schools.com/html/html_paragraphs.asp
What's the correct syntax to use a prop for an element id except but with a prefix. Do I have to assign each to a variable and use a string literal, or can I do it inline?
e.g.
<input id="first_{id}" type="text" value={firstName} />
<input id="last_{id}" type="text" value={lastName} />
Use ${} outside your value, which is called template literals in javascript
{`your-prefix-${yourValue}`}
I would prefer a string interpolation syntax like so
<input id={`first_${id}`} type="text" value={firstName} />
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
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 "+"