score:3
in react if you want to render same component multiple times and treat them as different then you need to provide them a unique key
. try the below code.
{toggle ? <a key="a" prop={"a"} /> : <a key="b" prop={"b"} />}
score:1
react will only call the constructor once. that's the expected outcome. looks like you're trying to update the state of the component a based on the props. you could either use the prop directly or use the componentdidupdate lifecycle method, as henry suggested. another way is using the static method getderivedstatefromprops to update the state based on the prop passed.
static getderivedstatefromprops(props, state) {
return ({
content: props.prop
});
}
score:2
since that ternary statement renders results in an <a>
component in either case, when the <app>
's state updates and changes toggle
, react sees that there is still an <a>
in the same place as before, but with a different prop
prop. when react re-renders it does so by making as few changes as possible. so since this is the same class of element in the same place, react doesn't need to create a new element when toggle
changes, only update the props of that <a>
element.
essentially, the line
{toggle ? <a prop="a"/> : <a prop="b"/> }
is equivalent to
<a prop={ toggle ? "a" : "b" }/>
which perhaps more clearly does not need to create a new <a>
component, only update the existing one.
the problem then becomes that you set the state.content
of the <a>
using props.prop
in the constructor, so the state.content
is never updated. the cleanest way to fix this would be to use props.prop
in the render
method of the <a>
component instead of state.content
. so your a
class would look like this:
class a extends component {
render() {
const { prop } = this.props;
return <div>{ prop }</div>;
}
}
if you must take the prop
prop and use it in the <a>
component's state, you can use componentdidupdate
. here's an example:
class a extends component {
constructor(props) {
super(props);
this.state = {content: props.prop};
}
componentdidupdate(prevprops) {
if (prevprops.prop !== this.props.prop) {
this.setstate({content: this.props.prop});
}
}
render() {
const { content } = this.state;
return <div>{ content }</div>
}
}
Source: stackoverflow.com
Related Query
- React constructor called only once for same component rendered twice
- Constructor getting called twice React Component
- react component render method being called twice for no reason
- React router 4 - Why is my component only rendered on manually setting the url but not on clicking a Link with same url?
- Multiple path names for a same component in React Router
- React Hooks Error: Hooks can only be called inside the body of a function component
- Why is `Promise.then` called twice in a React component but not the console.log?
- React shouldComponentUpdate() is called even when props or state for that component did not change
- Using JS React component in TypeScript: JSX element type 'MyComponent' is not a constructor function for JSX elements
- Enzyme returns null for prop on shallow rendered react component
- Unsafe legacy lifecycles will not be called for components using new component APIs. React v16.3
- How to ensure a constant inside a component is only calculated once on start in React (Native) with hooks?
- Why is my React component render called twice, once without data and then later with data, but too late exception?
- Why is a ReactJS component using Hooks rendered once or twice depending on developer console is open or not?
- React + Antd + Rollup Component Library "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"
- React Hooks can only be called inside the body of a function component
- React 17.0.1: Invalid hook call. Hooks can only be called inside of the body of a function component
- Only Display Component for Some Routes - React
- React : How to stop re-rendering component or making an API calls on router change for the same route
- Receiving error - Hooks can only be called inside of the body of a function component when implementing React Spring basic example
- How to render component only once in React Native
- Constructor and render methods run twice in react component
- Refresh the page only once in react class component
- React setState callback not called for external (npm packaged) component
- React Js component rendering only once after state change
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- React Infinite Scroller - Two children with the same key. loadMore function being called twice
- Using the same component for different Routes with React Router
- React Hooks Mobx: invalid hook call. Hooks can only be called inside of the body of a function component
- Mocking simple internal function using Jest for use in rendered React component
More Query from same tag
- Protractor tests with React.js application slow to launch
- IIS rewrite condition for React MVC App
- Replace array entry with spread syntax in one line of code?
- React how to get index in search
- Auto Padding Bottom?
- babel core 7.4.4, using all polyfills by default
- ReactJS: How to use single form in a modal to add multiple rows in a table
- React router path issue
- React JSX append HTML (react object) after initialization
- Waiting for useState hook increment counter using Promises
- On successful login, this.props.history.push does not take to new page as ProtectedRoute is not successful
- Route in React Js
- How can I pass props to 'this.props.children' when using react-router?
- React Apex Charts Won't Resize
- How to use css modules with create-react-app?
- URL changes but page new page is not rendered Ionic React , IonReactRouter with history
- React-Bootstrap Tooltip requires overlay error
- Delete state objects in react
- Proper way to perform an API call inside div?
- Render Once for Multiple set States using useState hook in React
- how to bind array data to dropdwon in react js
- React Redux applyMiddleware invalid number of arguments
- Simulating click on document ReactJS/JSDom
- How to fix Flow error when accessing a field with default value on an object?
- react-testing-library: Test evaluation happens too early
- React.js passing => in props
- invalid hook call with SWR library
- How to force webpack to preserve async/await within the built file?
- Reac component is not beeing exported
- Is there a setting in React Compound Timer that allows Double Zeros