Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Accessibility in React.js
The aria-* attributes on html elements are also supported in React.js as well. The other attributes are generally written in camel-case but these aria-* are written in hyphen-cased.
<input
type = "text"
aria-label = {labelText}
aria-required = "true"
onChange = {changeHandler}
value = {inputValue}
name = "userInput"
/>Sometimes we break the semantics of the html if we use parent div in React.js
Example
render(){
return(
<div>
<h1>Test</h1>
</div>
);
}Div can cause semantics issue if working with table, list etc. To avoid this we can use React provided fragment as shown below −
import React, { Fragment } from ‘react’;
function MessageList({ message }) {
return (
<Fragment>
<dt>{ message.key }</dt>
<dd>{message.description}</dd>
</Fragment>
);
}We can also use it with map a collection of items to an array of fragments −
function MessageList(props) {
return (
<dl>
{props.messages.map( message => (
// Fragments should also have a `key` prop when mapping collections
<Fragment key = { message.id}>
<dt>{message.from}</dt>
<dd>{message.To}</dd>
</Fragment>
))}
</dl>
);
}The short syntax of fragment is writing just >>
import React, { Fragment } from ‘react’;
function MessageList({ message }) {
return (
<>
<dt>{ message.key }</dt>
<dd>{message.description}</dd>
</>
);
}Labeling in forms
Instead of writing for attribute in label, we write it as htmlFor
<label htmlFor = "userID">Name:</label> <input id = "userID" type = "text" name = "name"/>
Focus control with ref −
We can create ref as −
This.userInput = React.createRef();
getFocus() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.userInput.current.focus();
}To work the ref through the higher order components, its needed to use forward ref.
Updated on: 28-Aug-2019
302 Views
Advertisements