I have two components, the parent and child. Currently I have these codes below. But unfortunately it returns an error:
TypeError: Cannot read property 'click' of null
For some reasons I want when button is click the Item component also will be click. But these codes below produces an error above. Anyone does know how to achieve it?
import React, { useRef } from 'react';
const App = (props) => {
const itemRef = useRef(null);
return (
<div>
{dynamicBoolean ? (
<button onClick={() => itemRef.current.click()}>
click item
</button>
) : (
//more codes here
<Item ref={itemRef} />
)}
</div>
);
};
export default App;
Child component would look like below (demonstration purposes, the code is very lengthly)
import React from 'react';
const Item = (props) => {
return (
<div>
//some design here
</div>
);
};
export default Item;
You need useRef and you have to forward this ref to the Item component.
import React, { forwardRef, useRef } from 'react';
const Item = forwardRef((props, ref) => {
return <li {...props}
onClick={() => alert('clicked on Item')}
ref={ref} >MyItem</li>
})
const App = (props) => {
const itemRef = useRef(null);
return (
<div>
<button onClick={() => itemRef.current.click()}>
click item
</button>
<Item ref={itemRef} />
</div>
);
};
export default App;
import React, { createRef } from "react";
const Hello = (props) => {
const itemRef = createRef();
const hello = () => {
itemRef.current.click();
};
return (
<div>
<button onClick={() => hello()}>click item</button>
<Item ref={itemRef} />
</div>
);
};
const Item = React.forwardRef((props, ref) => {
const myClick = () => {
console.log("this is clicked");
};
return (
<button ref={ref} className="FancyButton" onClick={myClick}>
{props.children}
</button>
);
});
export default Hello;
Related
I am trying to update state of page index in index.js from component Pagination,
my index.js:
import useSWR from 'swr';
import { useState } from 'react';
const Index = ({ data }) => {
const initialStatePage = () => 1;
const [pageIndex, setPageIndex] = useState(initialStatePage);
const { data } = useSWR(`http://1.2.3.4/api/console?pagination[page]=${pageIndex}`, fetcher, {fallbackData: data});
return (
<>
<h1> {data} <h1/>
<Pagination pagenow={initialStatePage}/>
<>
);
};
export default Index;
my component:
import { useState } from 'react';
const Pagination = ({ pagenow }) => {
const [pageIndex, setPageIndex] = useState(pagenow);
return (
<>
<li>
<button onClick={() => setPageIndex(pageIndex - 1)}>
</button>
</li>
<button onClick={() => setPageIndex(pageIndex + 1)}>
</button>
</li>
</>
)
};
export default Pagination;
but after click, page index is not updating from my component
The state in your Pagination component will rerender the children element, not the whole page.
If you want it to rerender the whole Index page, pass your setPageIndex function to the component and use it to set the page index:
index.js
import useSWR from 'swr';
import { useState } from 'react';
const Index = ({ data }) => {
const initialStatePage = () => 1;
const [pageIndex, setPageIndex] = useState(initialStatePage);
const { data } = useSWR(`http://1.2.3.4/api/console?pagination[page]=${pageIndex}`, fetcher, {fallbackData: data});
return <>
<h1>{data}</h1>
<Pagination pagenow={initialStatePage} setPageIndex={setPageIndex} />
<>;
};
export default Index;
Pagination component file
import { useState } from 'react';
const Pagination = ({ pagenow: pageIndex, setPageIndex }) => {
return <>
<li>
<button onClick={() => setPageIndex(pageIndex - 1)}></button>
<button onClick={() => setPageIndex(pageIndex + 1)}></button>
</li>
</>;
};
export default Pagination;
I'm trying to edit an input value in a child component and send to the parent
:
https://codesandbox.io/s/sleepy-rain-skoss?file=/src/Editlabel.js:0-389
Parent:
import "./styles.css";
import EditLabel from "./Editlabel";
import { useEffect, useState } from "react";
export default function App() {
const [newName, setNewName] = useState();
useEffect(() => {
console.log("newName", newName);
}, [newName]);
return (
<div className="App">
<EditLabel
value={"hello"}
click={(changedName) => {
setNewName(changedName);
}}
/>
</div>
);
}
Child:
import React, { useState } from "react";
const EditLabel = ({ value, click }) => {
const [name, setName] = useState(value);
return (
<>
<input type={"text"} placeholder={name}></input>
<button
onClick={(e) => {
setName(e.target.value);
click(name);
}}
>
Edit
</button>
</>
);
};
export default EditLabel;
However, the console logs "hello" and then it just logs empty strings.
How can I make it work?
try this on your child's input box
<input type={"text"} placeholder={name} onChange={(e) => setName(e.target.value)}>
Change EditLabel to use a ref to capture the input value:
const EditLabel = ({ value, click }) => {
const inputRef = useRef(null);
return (
<>
<input ref={inputRef} type={"text"} placeholder={value}></input>
<button
onClick={() => {
click(inputRef.current.value);
}}
>
Edit
</button>
</>
);
};
Update App to use the values it gets via the click callback:
export default function App() {
const [newName, setNewName] = useState("hello");
useEffect(() => {
console.log("newName", newName);
}, [newName]);
return (
<div className="App">
<EditLabel
value={newName}
click={(changedName) => {
setNewName(changedName);
}}
/>
</div>
);
}
I have this project for pagination of json data received through an API. The problem is that my code somehow gives me a 'slice' error (it is not the case when using other API's, e.g. https://corona.lmao.ninja/v2/countries) <--- Works fine
Items.js:
import React from 'react';
import { ITEMS_PER_PAGE } from '../utils/constants';
import Data from './Data';
const Items = ({ items, page }) => {
const startIndex = (page - 1) * ITEMS_PER_PAGE;
const selectedItems = items.slice(startIndex, startIndex + ITEMS_PER_PAGE);
return (
<React.Fragment>
{selectedItems.map(item => (
<Data key={item.country} {...item} />
))}
</React.Fragment>
);
};
export default Items;
Data.js:
import React from 'react';
const Data = ({ Data }) => {
const { high, low } = Data;
return (
<div class="data">
<p>
<strong>Test:</strong> {high} {low}
</p>
<hr />
</div>
);
};
export default Data;
Pagination.js:
import React from 'react';
const Pagination = ({ totalPages, handleClick, page }) => {
const pages = [...Array(totalPages).keys()].map(number => number + 1);
return (
<div className="numbers">
{pages.map(number => (
<a
key={number}
href="/#"
onClick={() => handleClick(number)}
className={`${page === number && 'active'}`}
>
{number}
</a>
))}
</div>
);
};
export default Pagination;
App.js:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Pagination from './components/Pagination';
import Items from './components/Items';
import { ITEMS_PER_PAGE } from './utils/constants';
const App = () => {
const [items, setItems] = useState([]);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
setIsLoading(true);
axios
.get('https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&tsym=USD&limit=10')
.then(response => {
const result = response.data;
setItems(result);
setTotalPages(Math.ceil(result.length / ITEMS_PER_PAGE));
setIsLoading(false);
});
}, []);
const handleClick = number => {
setPage(number);
};
return (
<div>
<h1>Pagination Demo</h1>
{isLoading ? (
<div className="loading">Loading...</div>
) : (
<React.Fragment>
<Items items={items} page={page} />
<Pagination
totalPages={totalPages}
handleClick={handleClick}
page={page}
/>
</React.Fragment>
)}
</div>
);
};
export default App;
My problem seems to be something that am I missing with this other API: https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&tsym=USD&limit=10
error: TypeError: items.slice is not a function in Items.js
Any help would be appreciated!
The response from the API has 2 nested Data keys, so it has to be like this:
const result = response.data;
setItems(result.Data.Data);
Data.js
import React from 'react';
const Data = ({ high, low }) => {
return (
<div class="data">
<p>
<strong>Test:</strong> {high} {low}
</p>
<hr />
</div>
);
};
export default Data;
demo: https://stackblitz.com/edit/react-arqaxj
I have a mapped list that contains another component that is also mapped.
(https://stackblitz.com/edit/rowmaptest?embed=1&file=LaneInfo.jsx)
What I'm trying to do is toggle a single row to show the data from the subcomponent.
LaneInfo.jsx
import React, { useState, useEffect } from "react";
import data from "./data.js";
import CarContainer from "./CarContainer";
const LaneInfo = () => {
const laneData = data.lanes;
const [showLanes, setShowLanes] = useState(false);
return (
<>
{laneData.map(lane => (
<>
<div className="lane" onClick={() => setShowLanes(!showLanes)}>
<div className="space" key={lane.name}>
<div>{lane.name}</div>
<div>{lane.type}</div>
</div>
</div>
{showLanes && <CarContainer data={lane.cars} />}
</>
))}
</>
);
};
export default LaneInfo;
with the onClick function, the idea is to hide the div that has been clicked.
However, as you can see in my demo when I click the row both items either open or close.
I think that it will require me to get the unique id of the row from Data.js since this is the way I mapped the rows in , but I haven't been able to figure it out yet.
You might be better creating a separate Lane component and have it manage its own state:
import React, { useState, useEffect } from "react";
import data from "./data.js";
import CarContainer from "./CarContainer";
const Lane = ({
lane
}) => {
const [showLane, setShowLane] = useState(false);
return (
<>
<div className="lane" onClick={() => setShowLane(!showLane)}>
<div className="space" key={lane.name}>
<div>{lane.name}</div>
<div>{lane.type}</div>
</div>
</div>
{showLane && <CarContainer data={lane.cars} />}
</>
);
};
const LaneInfo = () => {
const laneData = data.lanes;
return (
<>
{laneData.map(lane => (
<Lane lane={lane} />
))}
</>
);
};
export default LaneInfo;
I would like to update the parent state from child component, which renders each object of the array of objects. The main goal of the child component is to update the original value from the array of objects.
I've the following code
Parent:
import { useState } from 'react';
import ExpenseItem from './expenseItem';
function Update({ data }) {
const [ expenses, setExpenses ] = useState(data);
return (
<div>
{expenses.map((expense, index) => {
return <ExpenseItem key={index} {...expense} />;
})}
<button>Save</button>
</div>
);
}
export default Update;
child:
import { useState, useRef } from 'react';
function ExpenseItem({ description, date, credit, debit }) {
const [ edit, setEdit ] = useState(false);
const [ expenseDescription, setExpenseDescription ] = useState(description);
const textInput = useRef();
const renderDefaultView = () => {
return <h3 onDoubleClick={() => setEdit(true)}>{expenseDescription}</h3>;
};
const renderEditView = () => {
return (
<div>
<input
type="text"
ref={textInput}
defaultValue={expenseDescription}
onDoubleClick={() => setEdit(true)}
/>
<button onClick={() => setEdit(false)}>X</button>
<button onClick={() => updateValue()}>OK</button>
</div>
);
};
const updateValue = () => {
const value = textInput.current.value;
setExpenseDescription(value);
textInput.current.defaultValue = value;
setEdit(false);
};
return (
<div>
{edit ? renderEditView() : renderDefaultView()}
<span>{date}</span>
<p>{debit}</p>
<p>{credit}</p>
</div>
);
}
export default ExpenseItem;
Once way, is to pass the parent state property (expenses) and the function that updates it (setExpenses) to the child Component via the props:
Parent:
import React from 'react';
import ReactDOM from 'react-dom';
import { useState } from 'react';
import ExpenseItem from './ExpenseItem';
function Update({ data }) {
const [ expenses, setExpenses ] = useState(data);
return (
<div>
Checking: { expenses[0].description } | { expenses[1].description }
<hr/>
{expenses.map((expense, index) => {
return <ExpenseItem key={index} index={index} expenses={expenses} setExpenses={setExpenses} />;
})}
<button>Save</button>
</div>
);
}
export default Update;
Child:
import React from 'react';
import { useState, useRef } from 'react';
function ExpenseItem( props ) {
let { description, date, credit, debit } = props.expenses[props.index];
const setExpenses = props.setExpenses;
const [ edit, setEdit ] = useState(false);
const [ expenseDescription, setExpenseDescription ] = useState(description);
const textInput = useRef();
const renderDefaultView = () => {
return <h3 onDoubleClick={() => setEdit(true)}>{expenseDescription}</h3>;
};
const renderEditView = () => {
return (
<div>
<input
type="text"
ref={textInput}
defaultValue={expenseDescription}
onDoubleClick={() => setEdit(true)}
/>
<button onClick={() => setEdit(false)}>X</button>
<button onClick={() => updateValue()}>OK</button>
</div>
);
};
const updateValue = () => {
const value = textInput.current.value;
setExpenseDescription(value);
textInput.current.defaultValue = value;
setEdit(false);
const expenses = [ ...props.expenses ]; // Get a copy of the expenses array
// Replace the current expense item
expenses.splice( props.index, 1, {
description: value, date, credit, debit
});
// Update the parent state
setExpenses( expenses );
};
return (
<div>
{edit ? renderEditView() : renderDefaultView()}
<span>{date}</span>
<p>{debit}</p>
<p>{credit}</p>
</div>
);
}
export default ExpenseItem;
Working demo
This can get really complicated as you move along, so the best option is to look for some sort of State Management solution, like using the Context API.
Also, take a look at this interesting post that talks about using the map index value as a key value: Index as a key is an anti-pattern