To add loop with React JSX, we use the array map method.
For instance, we write
<div>
{[...Array(10)].map((x, i) => (
<ObjectRow key={i} />
))}
</div>
to render the array’s data by creating array with 10 entries with Array(10).
Then we call map with a callback that returns the ObjectRow component to render its contents.
We set the key prop to i to set a unique key for each item.
To pass props to this.props.children with React, we call the React.cloneElement method.
For instance, we write
<div>
{React.cloneElement(this.props.children[0], {
loggedIn: true,
testPropB: true,
})}
{React.cloneElement(this.props.children[1], {
loggedIn: true,
testPropA: false,
})}
</div>;
to call cloneElement with the child element to render and an object with thge props that we want to pass into the child component.
We pass the loggedIn and testPropB props to the this.props.children[0] component.
And we pass the loggedIn and testPropA props to the this.props.children[1] component.
To fix React-router URLs don’t work when refreshing or writing manually, we should fix our server config.
For instance, we write
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
in the .htaccess file if we’re using Apache.
The file redirects all requests to index.html of the React app so that React Router can be used to render the routes instead of the server.
To force a React component to rerender without calling setState, we can keep a state with useReducer.
For instance, we write
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const handleClick = () => {
forceUpdate();
};
to call the useReducer hook to return an array withe forceUpdate function.
We call useReducer with a function toi return a new state each time forceUpdate is called.
Then we call forceUpdate to update the state returned by useReducer to trigger re-rendering.
Sometimes, we want to conditionally add attributes to React components.
In this article, we’ll look at how to conditionally add attributes to React components.
To conditionally add attributes to React components, we can pass them in as props,
For instance, we write
const InputComponent = () => {
const required = true;
const disabled = false;
return <input type="text" disabled={disabled} required={required} />;
};
to set the disabled attribute by setting the disabled prop to disabled.
And we set the required attribute by setting the required prop to required.
To conditionally add attributes to React components, we can pass them in as props,