I have 2 buttons. Add1 and Add2
The Add2 button in the Test does not work. What am I doing wrong. I'm not very familiar with React.
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { observer } from "mobx-react-lite";
function App() {
const [component, setComponent] = useState([]);
useEffect(() => {});
const Test = observer(() => {
return (
<div>
<p>
Test -
<button onClick={() => setComponent([...component, Test])}>
Add 2
</button>
</p>
</div>
);
});
return (
<div>
{component.map((Input, index) => (
<Input key={index} />
))}
<button onClick={() => setComponent([...component, Test])}>Add 1</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
codesandbox: https://codesandbox.io/s/react-hooks-useeffect-forked-ml77pz
You should not create component inside another component if you do not keep its reference!
Move it outside of App and add prop setComponent
const Test = observer(({setComponent}) => {
return (
<div>
<p>
Test -
<button onClick={() => setComponent(component => [...component, Test])}>
Add 2
</button>
</p>
</div>
);
});
function App() {
...
}
Then when you render, pass 'setComponent' to it:
<Input key={index} setComponent={setComponent} />
You have not defined the base case for this recursive render
const Test = observer(() => {
return (
<div>
<p>
Test -
<button onClick={() => setComponent([...component, Test])}>
Add 2
</button>
</p>
</div>
);
});
Related
I am having two components, App and a panel. On button clcik, I add panel to the screen and all the actions corresponding actions inside of the panel is handled in the Panel component ( Actions are expand, collapse and close). Can I somehow execute the same actions inside of the app component using useImperativeHandle hook using ref's. Also can I execute onClose method inside of the Panel component, here i am actually as a callback.
https://codesandbox.io/s/basic-demo-card-6ywop7?file=/src/Panel.jsx:0-985
Can someone help me here
App
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import Panel from "./Panel";
import "./styles.css";
function App() {
const [card, setCard] = useState({
cardId: "",
cardBody: null
});
const ref = useRef();
const handleClick = (cardId, cardBody) => {
setCard({ cardId, cardBody });
};
const { cardId, cardBody } = card;
return (
<>
<div className="main">
<button onClick={() => ref?.current?.expandBtn()}>Open from out</button>
<button onClick={() => handleClick("Panel 1", <h1>h1</h1>)}>
Add Panel 1
</button>
<button onClick={() => handleClick("Panel 2", <div>div</div>)}>
Add Panel 2
</button>
</div>
{cardBody && (
<div className="cards-container">
<Panel
key={cardId}
cardId={cardId}
cardBody={cardBody}
onClose={() =>
setCard({
cardId: "",
cardBody: null
})
}
/>
</div>
)}
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Panel
import React, { useImperativeHandle, useState, useRef } from "react";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import {
faSquareMinus,
faRectangleXmark
} from "#fortawesome/free-solid-svg-icons";
export default function Panel(props) {
const [isMinimized, setIsMinimized] = useState(false);
const { cardId, cardBody, onClose, ref } = props;
const expandRef = useRef();
useImperativeHandle(ref, () => {
return {
expandBtn: () => expandRef.current.onMaximize()
};
});
const onMaximize = () => {
setIsMinimized(!isMinimized);
};
return (
<>
<div className={isMinimized ? "card-min" : "card"}>
<div className="card-actions">
<span onClick={onMaximize}>{cardId}</span>
{!isMinimized && (
<FontAwesomeIcon
icon={faSquareMinus}
onClick={() => {
setIsMinimized(true);
}}
/>
)}
<FontAwesomeIcon icon={faRectangleXmark} onClick={onClose} />
</div>
<div className="card-body">{cardBody}</div>
</div>
</>
);
}
Yes, you can the child's function from the Parent using useImperativeHandle. What your implementation is missing is forwardRef. passing ref as props won't work. What you have to do is forward the ref from child to parent.
const Panel = React.forwardRef(function (props, ref) {
const [isMinimized, setIsMinimized] = useState(false);
const { cardId, cardBody, onClose } = props;
const onMaximize = () => {
setIsMinimized(!isMinimized);
};
useImperativeHandle(ref, () => {
return {
expandBtn: onMaximize
};
});
return (
<>
<div className={isMinimized ? "card-min" : "card"}>
<div className="card-actions">
<span onClick={onMaximize}>{cardId}</span>
{!isMinimized && (
<FontAwesomeIcon
icon={faSquareMinus}
onClick={() => {
setIsMinimized(true);
}}
/>
)}
<FontAwesomeIcon icon={faRectangleXmark} onClick={onClose} />
</div>
<div className="card-body">{cardBody}</div>
</div>
</>
);
})
export default Panel;
Pass the ref from the App
function App() {
const [card, setCard] = useState({
cardId: "",
cardBody: null
});
const ref = useRef();
const handleClick = (cardId, cardBody) => {
setCard({ cardId, cardBody });
};
const { cardId, cardBody } = card;
return (
<>
<div className="main">
<button onClick={() => ref?.current?.expandBtn()}>Open from
out</button>
<button onClick={() => handleClick("Panel 1", <h1>h1</h1>)}>
Add Panel 1
</button>
<button onClick={() => handleClick("Panel 2", <div>div</div>)}>
Add Panel 2
</button>
</div>
{cardBody && (
<div className="cards-container">
<Panel
ref={ref}
key={cardId}
cardId={cardId}
cardBody={cardBody}
onClose={() =>
setCard({
cardId: "",
cardBody: null
})
}
/>
</div>
)}
</>
);
}
This might help https://blogsbyarjun.hashnode.dev/how-to-update-childs-state-from-parent-in-react-1
In the List.js file im trying to remove each item from the list
Currently within App.js i have a button within the section that is able to delete all birthdays by passing in a empty array.
**App.js**
import React, { useState } from "react";
import data from "./data";
import List from "./List";
function App() {
const [people, setPeople] = useState(data);
return (
<main>
<section className="container">
<h3>{people.length} birthdays today!</h3>
<List people={people} />
<button onClick={() => setPeople([])}> Clear Birthdays </button>
</section>
</main>
);
}
export default App;
**List.js**
import React from "react";
const List = ({ people }) => {
return (
<>
{people.map((person) => {
const { id, name, age, image } = person;
return (
<article key={id} className="person">
<img src={image} alt={name} />
<div>
<h4>{name}</h4>
<p>{age}</p>
</div>
</article>
);
})}
</>
);
};
export default List;
I tried creating a new function and button with an arrow function in the List.js that passes in id like so
const removeItem = (id) => {
let newPeople = people.filter((person) => person.id !== id);
setPeople(newPeople);
};
<button onClick={() => removeItem(id}>Clear</button>
refactored code working solution below
*** App.Js ***
import React, { useState } from "react";
import data from "./data";
import List from "./List";
function App() {
const [people, setPeople] = useState(data);
const removeItem = (id) => {
let newPeople = people.filter((person) => person.id !== id);
setPeople(newPeople);
};
return (
<main>
<section className="container">
<h3>{people.length} birthdays today!</h3>
<List people={people} removeItem={removeItem} />
<button onClick={() => setPeople([])}> Clear Birthdays </button>
</section>
</main>
);
}
export default App;
*** List.js ***
import React from "react";
const List = ({ people, removeItem }) => {
return (
<>
{people.map((person) => {
const { id, name, age, image } = person;
return (
<article key={id} className="person">
<img src={image} alt={name} />
<div>
<h4>{name}</h4>
<p>{age}</p>
</div>
<button onClick={() => removeItem(id)}>Clear</button>
</article>
);
})}
</>
);
};
export default List;
request for comments for different solutions.
Just pass your removeItem function to the List component:
return (
<main>
<section className="container">
<h3>{people.length} birthdays today!</h3>
<List people={people} removeItem={removeItem} />
<button onClick={() => setPeople([])}> Clear Birthdays </button>
</section>
</main>
);
And call it when the button is clicked and pass the person's id to the function
It reads:
"Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
I have seen other thread with about this particular issue with JS React but the solutions didn't work for me. I was making a shopping cart app with React and it was working fine when everything was on one JSX page but when I start making files for every every compartment for example, "Products, "Cart". . I am aware others have had this problem but I believe there are different ways you can get this error message.
Index.js:
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js
const PAGE_PRODUCTS = 'products';
const PAGE_CART = 'cart';
function App() {
const [cart, setCart] = useState([]);
const [page, setPage] = useState(PAGE_PRODUCTS);
const addToCart = (product) =>{
console.log('we are in fart i mean cart');
setCart([...cart, {...product}]);
const removeFromCart = (productToRemove) =>{
setCart(
cart.filter(product => product !== productToRemove ));
};
const navigateTo = (nextPage) => {setPage(nextPage);
};
const renderCart = () => (
<>
<h1>Cart</h1>
<div className="products">
{cart.map ((product, idx) => (
<div className="product" key={idx}>
<h3>{product.name}</h3>
<h4>{product.cost}</h4>
<img src={product.image} alt={product.name}/>
<button onClick = {() => removeFromCart(product)}>Remove</button>
</div>
))}
</div>
</>
);
return (
<div className="App">
<header>
<button onClick={() => navigateTo(PAGE_CART)}>Go to Cart ({cart.length})</button>
<button onClick={() => navigateTo(PAGE_PRODUCTS)}>View Products </button>
</header>
{page === PAGE_PRODUCTS && (
<Products addToCart={addToCart} />
)}
{page === PAGE_CART && renderCart()}
</div>
);
};
}
export default App;
Products.jsx
import React, { useState } from 'react';
export default function Products({ addToCart }){
const [products] = useState([
{
name: 'TWA FUCK 12 T-SHIRT',
cost: '$19.99',
image: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ba6f3a5b-075f-4fae-9efd-dd797e00931a/ddya15n-0c2ea56a-4735-470c-bee9-41dd09f9dfb9.png/v1/fill/w_250,h_250,strp/blue_lives_splatter_by_0r4lf1x4t10n_ddya15n-250t.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0xMjgwIiwicGF0aCI6IlwvZlwvYmE2ZjNhNWItMDc1Zi00ZmFlLTllZmQtZGQ3OTdlMDA5MzFhXC9kZHlhMTVuLTBjMmVhNTZhLTQ3MzUtNDcwYy1iZWU5LTQxZGQwOWY5ZGZiOS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.bhFc4MR_BfROHMtp2C6Nl2GaQ1PeJS2piOioT3tyRgc'
},
{
name: 'TWA THE WORLD IS YOURS T-SHIRT',
cost: '$19.99',
image: 'https://ih1.redbubble.net/image.974235379.7506/poster,504x498,f8f8f8-pad,600x600,f8f8f8.jpg'
}
]);
return (
<>
<h1>Products</h1>
<div className="products">
{products.map ((product, idx) => (
<div className="product" key={idx}>
<h3>{product.name}</h3>
<h4>{product.cost}</h4>
<img src={product.image} alt={product.name}/>
<button onClick = {() => addToCart(product)}>Add To Cart</button>
</div>
))}
</div>
</>
);
}
I have trouble debugging this code.
I have an App component:
function App() {
const [state, setState] = useState(0);
const onSelectItem = () => {
console.log("🐞: onSelectItem -> currentState", state);
};
// items is an array of ReactNode: button, when click on it. It will log the currentState.
const items = ["FirstItem", "SecondItem"].map(item => (
<button key={item} onClick={() => onSelectItem()}>
{item}
</button>
);
);
return (
<div className="App">
<Menu items={items} />
<hr />
<button onClick={() => setState(prevState => prevState + 1)}>Change State</button>
</div>
);
}
My Menu components will receive items prop, and render it. It also has ability to set the active item. For simplicity's sake, I render a button to set activeItem to the first one. The active item will also be rendered.
function Menu({ items }) {
const [activeItem, setActiveItem] = useState(items[0]);
return (
<div>
{items}
<hr />
{activeItem}
</div>
);
}
Now, come to the main part:
I press the button (before hr) => it shows currentState (OK)
I press the active button (after hr) => it shows currentState (OK)
I press change state button => the state now changes to 1 (OK)
Now, if I press the button (before hr ) => It shows currentState is 1 (OK)
But, if I press the active button (after hr ) => It still shows 0 (which is the last state) (???)
My guess is React keeps remembering everything when using useState. But I'm not sure. Could anyone explain this for me!
I also include the snippets for you to easily understand my problem.
const {useState} = React;
function Menu({ items }) {
const [activeItem, setActiveItem] = useState(items[0]);
return (
<div>
{items}
<hr />
<span>Active Item:</span>
{activeItem}
</div>
);
}
function App() {
const [state, setState] = useState(0);
console.log(state);
const onSelectItem = () => {
console.log("🐞: onSelectItem -> currentState", state);
};
const items = ["FirstItem", "SecondItem"].map(item => {
return (
<button key={item} onClick={() => onSelectItem()}>
{item}
</button>
);
});
return (
<div className="App">
<Menu items={items} />
<hr />
<button onClick={() => setState(prevState => prevState + 1)}>Change State</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
You are trying to access the state from App component in your Menu component.
State is local to that component and can't be accessed outside, if you would like to access the state outside the component you can refer to the useContext hook implementation.
https://reactjs.org/docs/hooks-reference.html#usecontext
Reason you are seeing 0 in the Active state is that is the default value of useState.
You need to pass key to your menu component.
Whenever there is change in props, the component has to re-render with new props.
Refer this artcile from their official docs - https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
Change I made is passing state as key to Menu component
const {useState} = React;
function Menu({ items }) {
const [activeItem, setActiveItem] = useState(items[0]);
return (
<div>
{items}
<hr />
<span>Active Item:</span>
{activeItem}
</div>
);
}
function App() {
const [state, setState] = useState(0);
console.log(state);
const onSelectItem = () => {
console.log("🐞: onSelectItem -> currentState", state);
};
const items = ["FirstItem", "SecondItem"].map(item => {
return (
<button key={item} onClick={() => onSelectItem()}>
{item}
</button>
);
});
return (
<div className="App">
<Menu items={items} key={state}/>
<hr />
<button onClick={() => setState(prevState => prevState + 1)}>Change State</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
I have two functional component under my provider,
SubApp1 and SubApp2 and here when I am increasing counter1 in SubApp1 the SubApp2 also is rendering, even when it is not need to be re-rendered.
And when I am increasing counter2 in SubApp2 the SubApp1 also is rendering.
I know this happens regally, but How can avoid this situation ?
App.js:
import React, {useContext, useState, memo} from "react";
import "./styles.css";
export const MainContext = React.createContext();
export const MainProvider = ({children})=> {
const [counter1, setCounter1] = useState(0);
const [counter2, setCounter2] = useState(0);
return (
<MainContext.Provider value={{
counter1, setCounter1,
counter2, setCounter2,
}}>
{children}
</MainContext.Provider>
);
}
export const SubApp1 = memo(()=> {
const {counter1, setCounter1} = useContext(MainContext);
console.log('Counter 1: ', counter1);
return (
<div className="App">
<button onClick={()=> {
setCounter1(counter1+1);
}}>
Increase Count 1
</button>
</div>
);
});
export const SubApp2 = memo(()=> {
const {counter2, setCounter2} = useContext(MainContext);
console.log('counter2: ', counter2);
return (
<div className="App">
<button onClick={()=> {
setCounter2(counter2+1);
}}>
Increase Count 2
</button>
</div>
);
});
export default function App ({navigation}){
console.log('App Is rendering...');
return (
<div className="App">
<button onClick={()=> {
navigation.navigate('SubApp1');
}}>
navigate to SubApp1
</button>
<button onClick={()=> {
navigation.navigate('SubApp2');
}}>
navigate to SubApp2
</button>
</div>
);
}
index.js:
import React from "react";
import ReactDOM from "react-dom";
import App, {MainProvider} from "./App";
const MainApp = ()=> (
<MainProvider>
<App />
</MainProvider>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<MainApp />, rootElement);
You should pass the counter to the SubApps as props. Then memo will take care that only the component with changing props will be rerendered.
Something like this:
export const Wrapper1 = ()=> {
const {counter1, setCounter1} = useContext(MainContext);
return (
<SubApp1 {...{counter1, setCounter1}} />
);
};
export const SubApp1 = memo(({counter1, setCounter1})=> {
console.log('Counter 1: ', counter1);
return (
<div className="App">
<button onClick={()=> {
setCounter1(counter1+1);
}}>
Increase Count 1
</button>
</div>
);
});
export const SubApp2 = memo(({counter2, setCounter2})=> {
console.log('counter2: ', counter2);
return (
<div className="App">
<button onClick={()=> {
setCounter2(counter2+1);
}}>
Increase Count 2
</button>
</div>
);
});
export default function App (){
const {counter2, setCounter2} = useContext(MainContext);
console.log('App Is rendering...');
return (
<div className="App">
<Wrapper1/>
<SubApp2 {...{counter2, setCounter2}} />
</div>
);
}
Codesandbox link is not right...
I follow the tip of Peter Ambruzs, but i have a problem if i pass counter1 as a param. The component keep rerendering.
But, if i pass just setCounter1 function, its works fine.
Below, my example using typescript.
const Campaigns = (): JSX.Element => {
const { setAlert } = useContext(AlertContext);
return <InnerCampaign {...{ setAlert }} />;
};
const InnerCampaign = memo(
({ setAlert }: any): JSX.Element => {...},)
export default Campaigns;