I have a ChipInput like this. I want to show a hint text when it's empty.
<div className={classes.headline}>
<ChipInput
hintText='Type anything'
onChange={this.handleTagChange}
/>
</div>
But my browser gives this warning.
Warning: React does not recognize the hintText prop on a DOM
element. If you intentionally want it to appear in the DOM as a custom
attribute, spell it as lowercase hinttext instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
As per the ChipInput Readme, it should work. Am I missing something here?
Had a look at the code and found placeholder which worked!!!
<div className={classes.headline}>
<ChipInput
placeholder='Type anything'
onChange={this.handleTagChange}
/>
</div>
Related
I'm new to typescript an having warnings saying that:
Property 'label' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> in a tsx file.
<div label="apple">
Apple!
</div>
<div label="orange">
Orange!
</div>
The code is compiled successfully, but that warning is annoying me.
How can I solve this warning?
The label attribute isn't a valid attribute on a div tag. Do you mean to use aria-label instead?
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
I need make image tag clickable, but I get a warning by jsx-a11y, how do I fixed it, I already read no-noninteractive-element-interactions, but I do not wanna wrap other div tag around img tag, because it will make a redundancy tag, so does any other way to fix this warning?
The warning is [eslint] Non-interactive elements should not be assigned interactive roles.
and my code is
<img
styleName="pic-id-code"
src={picCodeImgSrc}
alt="pic id code"
onClick={this.refreshPicCodeImg}
onKeyPress={this.handleKeyPress}
role="button"
tabIndex="0"
/>
You should use <input type="image" /> for your use case, it is semantically correct and you won't need to add role or tabindex or any other ARIA tags to make it work and accessible.
There is a caveat as this doesn't actually return to normal state after click and remains focused so you need to call blur after your onClick logic. Here's the simple demo I made few days back to remove focus on click.
You can disable eslint for a specify line like this
// eslint-disable-next-line THE-RULE-HERE
<img
styleName="pic-id-code"
src={picCodeImgSrc}
alt="pic id code"
onClick={this.refreshPicCodeImg}
onKeyPress={this.handleKeyPress}
role="button"
tabIndex="0"
/>
Not sure what exactly your rule is but try this
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
or
// eslint-disable-next-line no-noninteractive-element-interactions
Update after OP comment
... but no work in react jsx
Try this
<img
styleName="pic-id-code"
src={picCodeImgSrc}
alt="pic id code"
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
onClick={this.refreshPicCodeImg}
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
onKeyPress={this.handleKeyPress}
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
role="button"
tabIndex="0"
/>
onClick and oneKeyPress on img will also trigger warnings.
I am new to react and could not grasp the concept between bsClass and className.
I try to implement a modified button style, like:
<Button bsClass="btn-custom" >Custom button</Button>
where it does not work when I substitute bsClass with className.
But in other part, using the same custom.css source, I implement:
<img src={logo} alt="logo" className="app-logo" /> and it works.
JSX attribute className is equivalent of HTML class. So the below JSX
<span className="app-logo">Logo</span>
will be equivalent to the below in HTML
<span class="app-logo">Logo</span>
As per bsClass is considered in
<Button bsClass="btn-custom" >Custom button</Button>
it is prop that is being passed on to the Button component in reactJS and that is what it will be using to set the className inside the component something like
<button className={this.props.bsClass}>{this.props.children}</button>
So it an attribute that is defined as a property by the react-bootstrap docs.
React's className is exactly equivalent to regular classes in CSS.
HTML/CSS:
<div class='red-text'>
Foo
</div>
React/JSX:
<div className='red-text'>
Foo
</div>
The above snippets of code do the exact same thing. The only reason we're stuck with using className in React (instead of class) is because "class" was already taken as a reserved keyword in JavaScript.
As the others have said, bsClass is a pre-defined class within the react-bootstrap package. Just like how the CSS-version of Bootstrap comes with its own styling, so, too, does react-bootstrap.
A practical difference. I you set bsClass to something other than what REACT-Bootstrap has as a default, you have to do your own css themeing of the button.
By adding a className="xx" you still get the default theme, but you can now add css styles for color, padding, etc, using your own .css
.xx {
magin-bottom: 2px
}
I have a React component that renders some html like below, with one callback method (this.deleteItem) triggered upon click of an x. In the callback method, I try to get the content associated with each of the two refs like this
var date = this.refs.date.getDomNode.value;
var content = this.refs.content.getDomNode.value;
but the result is undefined in both cases. When I simply do this.refs.content.getDomNode (instead of looking for the value) it shows me a div with some span tags inside, and inside of one of those is the content I was seeking. Similarily with the date ref, it is a <small></small> element with spans inside.
Question: how to get the value/content from a div or element when react wraps content in spans?
<div ref="wrapperdiv">
<span className="delete" onClick={this.deleteItem}>x</span>
<small ref="date"> {date} </small>
<div ref="content"> {content } </div>
</div>
This is a known limitation of react, in that it wraps any floating text nodes in a span because it has to handle the data-reactid of the component. See this question too.
Perhaps if you tried to remove the white space around the content?
<div ref="wrapperdiv">
<span className="delete" onClick={this.deleteItem}>x</span>
<small ref="date">{date}</small>
<div ref="content">{content}</div>
</div>
Also try:
this.refs.content.getDomNode().children[0].textContent
to get the value of the span. (Not sure if there is a react specific function for this). This will have to be done as well as removal of the white space within:
<small ref="date">{date}</small>
<div ref="content">{content}</div>
This is important because react generates span tags to handle the data-reactid. Take a look at: Rid of repeated spans in React.js?.