React is a popular library for creating web apps and mobile apps.
In this article, we’ll look at some tips for writing better React apps.
Why Can’t Input Value be Changed in React
We can’t change input value with React because we’ve to set the value prop of the input manually.
For instance, we write:
<input
className="form-control"
type="text"
value={this.state.name}
onChange={e => this.onChange(e.target.value)}
/>
Then in the onChange method, we can write:
onChange(value){
this.setState({
name: value
});
}
We set the name state in the method.
How to Render Text with a Single Quote with React JSX
We can render a string to render single quotes.
For instance, we can write:
return (
<div>
<p>{"I've eaten."}</p>
</div>
)
We can also use the HTML entity version of the single quote.
For instance, we can write:
<Text>I"ve eaten.</Text>
Check if Variable is React Node or Array
We can use React.isValidElement to check if a variable is a node or an array.
It takes a variable to check.
And it returns true if it is and false otherwise.
Detect if a Component is Rendering from the Client or the Server
We can use lifecycle hooks to detect server-side rendering.
If they run, then it’s rendered on the client-side.
Therefore, we can create our own hook to do the check.
We write:
import { useState, useEffect } from 'react'
function useIsClient () {
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
return setIsClient
}
to create the useIsClient hook.
If the useEffect callback is run, then we know that it’s rendered on the client-side.
Then we can check that it’s a client-side rendered app.
Then we can use it by writing:”
import { useState, useEffect } from 'react'
function useIsClient () {
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
return setIsClient
}
function App() {
const isClient = useIsClient();
return isClient
? 'client'
: 'serve'
}
We use the useIsClient hook to check for client-side rendering.
Then we can render what we want according to that.
Change Checkbox State
We can change the checkbox state by passing in the checked prop to the checkbox.
For instance, we can write:
class CheckBox extends React.Component {
render() {
return (<input type="checkbox" checked={this.props.checked} />);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { checked: true };
}
render() {
return (
<div>
<a href="#" onClick={ () => { this.setState({ checked: !this.state.checked }); }}>Toggle</a>
<hr />
<CheckBox checked={this.state.checked} />
</div>
);
}
}
We toggle the checkbox when we click on the link.
Then we pass in the checked state to our CheckBox component, which has the checkbox.
Then in the CheckBox component, we pass the checked prop to the checked value.
Use Normal Anchor Links with React Router
The React Router Hash Link package lets us create hash links easily in our React app if we use React Router.
To install it, we run:
yarn add react-router-hash-link
or:
npm install --save react-router-hash-link
Then we can use it by writing:
import { HashLink as Link } from 'react-router-hash-link';
//...
const App = () => {
//...
return <Link to="/some/path#some-hash">hash link</Link>
}
We can also add a nav link, which lets us set the active style.
We can use that by writing:
import { NavHashLink as NavLink } from 'react-router-hash-link';
//...
const App = () => {
//...
return <NavLink
to="/some/path#some-hash"
activeClassName="acrive"
>
hash nav link
</NavLink>
}
It takes an activeClassName prop to let us set the active class name when the link is active.
Also, it supports changing the scroll behavior when we navigate to the element with the given ID.
The link can also be customized.
Conclusion
We can use a package to create our hash links if our app uses the React Router.
Input changes can be displayed if we set the value prop for text inputs.
For checkbox inputs, we can pass in a value to the checked prop.
We can render single quotes as an HTML entity or in a string.
