Why I can't call useRef inside callback? - javascript

When I write this code I have an error:
React Hook "useRef" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function
What should I do with this code?
return ITEMS.map((item, i) => {
const elementRef = useRef(null);
return (
<div
ref={elementRef}
key={i}
>
<p>{item.name}</p>
<Wrapper>
{item.name === visibleItem && (
<Item
parentRef={elementRef}
/>
)}
</Wrapper>
</div>
);
}

Here are two possibilities, Either using useRef with an object/array, or using createRef as suggested by Yevgen Gorbunkov.
I'm not entirely sure as to the viability of these as the createRef option will create entirely new refs on each render, and the useRef option you'll need to make sure your keys/indexes are always the same.
const ITEMS = [{ name: "test" }, { name: "test2" }];
export default function App() {
const ref = useRef({});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{ITEMS.map((item, idx) => {
return (
<div key={idx} ref={element => (ref.current[idx] = element)}>
<p>{item.name}</p>
<Wrapper>
{item.name === visibleItem && (
<Item parentRef={ref.current[idx]} />
)}
</Wrapper>
</div>
);
})}
{ITEMS.map((item, idx) => {
const ref = createRef();
return (
<div key={idx} ref={ref}>
<p>{item.name}</p>
<Wrapper>
{item.name === visibleItem && <Item parentRef={ref} />}
</Wrapper>
</div>
);
})}
</div>
);
}

Related

React - component is not rendered

After receiving data from the DB server, you try to render it, but the console log shows the data, but the component is not rendered. What's the reason?
useEffect(() => {
readRequest().then(setTodos);
console.log()
}, []);
return (
<div className="App">
{todos.map((todo) => {
console.log(todo);
console.log(todo.text);
<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>
})}
<p>dfdf</p>
</div>
);
The picture is a screen capture.
Your .map callback does not return anything.
Change the { to (:
return (
<div className="App">
{todos.map((todo) => ( // <-- here
<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>
))}
<p>dfdf</p>
</div>
);
Or use the return keyword.
return (
<div className="App">
{todos.map((todo) => {
return (<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>);
})}
<p>dfdf</p>
</div>
);

TypeError: Cannot read property 'name' of undefined, unable to iterate through object array

I am a beginner in react please help me with this problem
when I am iterating through the array of objects that I have imported from category.json using map function, I am passing the props of object to my Category component, so when my category page is rendering it gives TypeError: Cannot read property 'name' of undefined.`
App.js
import React, { useState } from 'react';
import category from './data/categories.json';
import Categ from './Components/Categ';
function App() {
const [data, setData] = useState(category);
return (
<div className="App">
{data.map(item => (
<Categ key={item.id} name={item.name} desc={item.description} />
))}
</div>
);
}
export default App;
`
Categ.js
import React from 'react';
function Categ({ props }) {
console.log(props);
return (
<div>
<h1>{props.name}</h1>
<p>{props.desc}</p>
</div>
);
}
export default Categ;
category.json
[
{
"id": "fgsa2142fa",
"name": "Keyboards",
"description": "Buy different keyboard from any brand available"
},
{
"id": "xasgy42fa",
"name": "Headphones",
"description": "Find best-fit for your ears"
}
]
When your component first renders, your data object is undefined. You can solve this quite easily by a number of ways:
Optional chaining: ?. notation will call map function only if data is not falsy
function App() {
const [data, setData] = useState(category);
return (
<div className="App">
{data?.map(item => (
<Categ key={item.id} name={item.name} desc={item.description} />
))}
</div>
);
}
Conditional rendering:
function App() {
const [data, setData] = useState(category);
return (
<div className="App">
{data && data.map(item => (
<Categ key={item.id} name={item.name} desc={item.description} />
))}
</div>
);
}
or:
function App() {
const [data, setData] = useState(category);
return (
<div className="App">
{data ? data.map(item => (
<Categ key={item.id} name={item.name} desc={item.description} />
)) : <p> No data </p>}
</div>
);
}
Essentially, data && data.map and data?.map does the same thing here.
#Patryk's suggestion:
(data || []).map
The data variable renders as undefined for the first time, one way you can manage this as well is like the following:
function App() {
const [data, setData] = useState(category);
return (
<div className="App">
{!data ? <h1>Loading</h1> : data.map(item => (
<Categ key={item.id} name={item.name} desc={item.description} />
))}
</div>
);
}
Why undefined ?
You are passing the props as destruct format in Category. it does't have name key
You could pass the props as single param instead destruct
Do like this in category
function Categ(props) {
And also better validate the data before itreate
data && data.map

React how to pass a component with its props to another component

I need to pass a wrapper to the component Test. This wrapper could be anything and it needs to have its own props (function, bool, string, whatever).
function App() {
return (
<div className="App">
<h1>Yo</h1>
<Test Wrapper={<CustomWrapper text={"yes"} />} />
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
The component Test receives it as a prop and renders it including the children (here 'Nope')
function Test({ Wrapper }) {
return (
<div>
<Wrapper>
<div>Nope</div>
</Wrapper>
</div>
);
}
What is the right pattern to do that?
Pass the child as a prop would work
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Yo</h1>
<Test Wrapper={CustomWrapper({ text: "yes" })} />
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const Test = ({ Wrapper }) => {
return (
<div>
<Wrapper children={<div>Nope</div>} />
</div>
);
};
const CustomWrapper = props => ({ children }) => {
return (
<div>
{children}
{props.text}
</div>
);
};

Cleaner react code when using loops and map

I have this code working with react, and its just getting very cluttered, so I was wondering if there is a way to make this code and others that are quite similar to look cleaner.
render() {
let result = null;
var obj = this.state.welcome;
let test = null;
if (this.state.isReal) {
test = Object.entries(obj).map(([key, value], index) => {
return (
<li key={index}>
Word: "{key}" repeats: {value} times
</li>
);
});
result = (
<Aux>
<h3>Title</h3>
<ul>{test}</ul>
</Aux>
);
}
return (
<Aux>
<div className="bframe">
<div className="form" />
{result}
</div>
<Footer />
</Aux>
);
}
I was wondering if its possible to move everything before 'return' statement, preferable in a separate file. I tried making a functional component and passing props but im unable to do loops there. Any tips?
You can reduce your code to the following :
render() {
const { welcome, isReal } = this.state
return (
<Aux>
<div className="bframe">
<div className="form" />
{isReal &&
<Aux>
<h3>Title</h3>
<ul>
{Object.entries(welcome).map(([key, value]) =>
<li key={key}>
Word: "{key}" repeats: {value} times
</li>
)}
</ul>
</Aux>
}
</div>
<Footer />
</Aux>
);
}
Do not use var, by default use const and if you want to modify your variable, use let.
You can choose to render an element or not by using the inline if : &&.
Your function is also unnecessary as it can be replaced by inline JS.
Your map can also be reduce from : x.map(a => { return <div/> } to x.map(a => <div/>.
You can also use the key of each item as the React key since they all have to be unique anyway in your object.
Maybe something like the following
const Result = ({real, welcome}) => {
if (!real) return null;
const words = Object.entries(welcome).map(([key, value], index) => <li key={index}>
Word: "{key}" repeats: {value} times
</li>
);
return (
<Aux>
<h3>Title</h3>
<ul>{words}</ul>
</Aux>
);
}
class YourComponent extends React.Component {
// ...
render() {
const {isReal, welcome} = this.state;
return (
<Aux>
<div className="bframe">
<div className="form" />
<Result real={isReal} welcome={welcome}/>
</div>
<Footer />
</Aux>
);
}
}

react-popper: re-position using scheduleUpdate

I'm using React-popper to show a date picker element after clicking a button.
JSX
<Manager>
<Reference>
{({ ref }) => (
<button ref={ref} onClick={this.onDateRangeBtnClick}>click to show</button>
)}
</Reference>
{ReactDOM.createPortal(
<Popper placement="auto-end" >
{({ ref, style, placement, arrowProps, scheduleUpdate }) => (
<div className={`dayPickerOverlay ${this.state.showDatePicker ? "" : "hidden"}`} ref={ref} style={style} data-placement={placement}>
<DateRangePicker />
</div>
)}
</Popper>,
document.querySelector('#root')
)}
</Manager>
When onDateRangeBtnClick is called after the button was clicked, I want to re-position the Popper element by calling scheduleUpdate method, but I do not know how to approach this.
How can I expose that specific scheduleUpdate to be called within the onDateRangeBtnClick or alternatively how can I conditionally call a function (scheduleUpdate for this matter) within JSX itself?
I would split the popper part into its own component and take advantage of the React lifecycle hooks.
Inside componentDidUpdate you can check if the open state changed, and trigger the scheduleUpdate accordingly.
// PopperElement.js
export default class PopperElement extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.open && this.props.open !== prevProps.open) {
this.props.scheduleUpdate();
}
}
render() {
return (
<div className={`dayPickerOverlay ${this.state.showDatePicker ? "" : "hidden"}`} ref={ref} style={style} data-placement={placement}>
<DateRangePicker />
</div>
);
}
}
// App.js
<Manager>
<Reference>
{({ ref }) => (
<button ref={ref} onClick={this.onDateRangeBtnClick}>click to show</button>
)}
</Reference>
{ReactDOM.createPortal(
<Popper placement="auto-end">
{({ ref, style, placement, arrowProps, scheduleUpdate }) => (
<PopperElement open={this.state.open} scheduleUpdate={scheduleUpdate} />
)}
</Popper>,
document.querySelector('#root')
)}
</Manager>
If you prefer a more concise approach, I think I'd use react-powerplug this way:
import { Manager, Popper, Reference } from 'react-popper';
import { State } from 'react-powerplug';
const App = () => (
<Manager>
<Popper>
{({ ref, style, scheduleUpdate }) => (
<State initial={{ open: false }} onChange={scheduleUpdate}>
{({ state, setState }) => (
<Fragment>
<Reference>
{({ ref }) => (
<button
ref={ref}
onClick={() => setState({ open: true }})
>click to show</button>
)}
</Reference>
{open && <YourContent ref={ref} style={style} />}
</Fragment>
)}
</State>
)}
</State>
</Manager>
);
I avoided to repeat the React.createPortal part for conciseness, it should be in place of YourContent.

Categories

Resources