Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
My Code
The code shows that when you enter data in three lines, they must be transmitted via Link using the State method, but when you try to display them on the secStr page, it gives Undefined
You have to add the withRouter HOC (high order component) into secStr page to have access to location props and the state data
Take a look at this:
https://reactrouter.com/web/api/withRouter
Something like this:
import React, {
Component
} from "react";
import {
withRouter
} from "react-router";
class secStr extends Component {
render() {
console.log(this.props);
return ( <
div >
date in inputs <
br / >
<
/div>
);
}
}
export default withRouter(secStr);
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed yesterday.
Improve this question
(PS: my question is solved but closed. So I updated this question to make it simpler, but still replicating the same problem as before)
I am very new to React and now I am learning how to test React Components with React Testing Library.
I have made an Education Component that would render education details. But for this question I will keep the Component very simple to replicate the error.
I want to test if Education is rendered correctly with toBeInTheDocument() but I came across a problem while using getByTestId() to select the Education Component as a whole. I got the Reference Error: Cannot access 'Education' before initialization error.
My Education.js Component:
class Education extends React.Component {
render() {
return (
<div data-testid='Education' id='Education'>
My Education
</div>
)
}
My Education.test.js:
import { render, screen } from '#testing-library/react'
import '#testing-library/jest-dom'
describe('Test Components are rendering correctly', () => {
it('renders Education Component', () => {
render(<Education />)
const Education = screen.getByTestId('Education')
expect(Education).toBeInTheDocument();
})
})
Error Screenshot:
Please let me know what I am doing wrong or should I provide more information to solve this problem. Thank you in advance, I appreciate it!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 months ago.
Improve this question
This is my React code.
I use react-slick library.
I expect 1. when clickedIndex changes 2. it calls useEffect 3. option state change 4. rerender this EnlargePhto component 5. StyledSlider is affected by changed option. 6. combineMood_1 array's initialSlide = clickedIndex
7. ex) clickedIndex = 8 --> StyledSlider start at 8 image.
BUT,, it continuely starts at array's first image.
how can i solve it?
It's probably because initialSlide only defines the default starting slide, and cant be used to control it thereafter.
What you need is a ref to the slider then call slickGoTo. You won't need options in state any more.
The API of react-slick is a bit bad by the way -- usually calling methods on a ref is an escape hatch and it'd just be a prop but...this is what they've gone with.
const options = {
// your existing options here.
// They can now be defined outside the component as they never need to change anymore
}
function EnglargePhoto({combineMood_1, clickedIndex}) {
const sliderRef = useRef(null)
useEffect(() => {
if (sliderRef.current === null) return // because on initial render it will not be set yet, since the DOM isnt rendered
sliderRef.current.slickGoTo(clickedIndex)
}, [clickedIndex])
// return
<StyledSlider {...options} ref={sliderRef}>
// existing contents
</StyledSlider>
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
import React from "react";
export default class App extends React.Component {
render() {
console.log('Hello');
return (
<div> App component </div>
)
}
}
I am facing this issue since yesterday. Hello should have been printed in the console on inspecting my website but nothing is getting displayed. I saved the code and also refreshed the browser.
Open your browser inspection and select the console tab on it. Click on the All levels and make sure all the options are selected:
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am trying to add a visited state/class on a Div by using state, but running into some issues. I am not able to use an anchor, so I need to be able to set it on a class.
This is not an option:
a:visited {
...
}
Codesandbox.io:
https://codesandbox.io/s/l5x1l78mqz
You need to store this information in some state variable. You could store this right on BreadCrumb, but to do that you'd need to (1) make it a class and (2) handle its click function natively before calling onClickTabItem:
class BreadCrumb extends Component {
constructor(props) {
this.state = {visited: false}
}
render () {
return (
<li className={this.state.visited ? "visited" : ""} ... >
);
}
}
Alternatively you can store the visited state information in SummaryBar so that you can pass the visited status in as a prop, as it seems you are attempting to do. To do this you need a data structure that allows you to store all the visited states, not just the currently selected one.
state = { activeTab: 0, select: "" , visited: {}};
Then in handleClickTabItem, you updated the visited for the given element (which you'd need to figure out the title for)
visited = this.state.visited;
visited[title] = true;
this.setState(visited: visited);
To figure out the title, the easiest way is probably to pass it as an arg to the click handler in BreadCrumb
onClick={() => onClickTabItem(title)}
You can then use this in your Buttons function as you are attempting to do:
visited={this.state.visited[title]}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am displaying contact list array.
If contacts array is empty it will show the loader else will display contact list.
I render loader using higher order component Using this tutorial. For this I got performance summary as shown in the below image-
when i render loader using simple if else condition then i had performance graph as below -
comparing this i got to know that while using higher order component it requires more time than simple loop.
Can anyone please explain me which is better to use ? and when we should use the Higher order component ? what are advantages and disadvantages of using Higher order component ?
A higher order component allows you to apply functionality or data that is common amongst a number of components to a component and will return a new component with the functionality or data of the HoC included.
As for advantages or disadvantages. Would entirely depend on the circumstance and problem you are trying to address. You would also need to perform a long list of tests as the times are too close to really say one is quicker than the other. Also this looks like it is on your local so on production server could be an entirely different story.
But in your circumstance are you apply any extra functionality to your <Loader /> component? If you aren't or that functionality is not going to be used anywhere else then it might be unnecessary to use a HoC in your case.
ReactJS - Higher Order Components
pros for HOC:
extremly reusable around your app/projects:
// withShowSupport.js
export default Component => props =>
!props.show
? null
: <Component { ...props } />
easy testing
res:
https://www.robinwieruch.de/gentle-introduction-higher-order-components/
New technology can lead us to be more efficient and effective in productivity. But, of course, it will also increase resource usage.
I don't have enough knowledge to explain more, but I can give you simple study case.
I have a react app which consists of several pages (how about > 10 pages?). I want to do something when each page has been rendered (In other words, page changes). If-else condition rendering? No way!
Actually, you can make an HOC named withBase that will wrap each page (Use it when you export your page component e.g. export default withBase(Home)). withBase will execute a function that indicates page has been changed.
DEMO
As per definition :
HOC is a function that accepts your component as an argument and
returns a new function that adds some feature to the component.
A simple use case is - when you call an API to fetch some data and use them to render some content in your application, we need to show some kind of progress bar, loading indicator, etc to tell users that data is being fetched. We can use HOC for that purpose.A sample code goes here
import React from 'react';
import List from './List.js';
import WithLoading from './WithLoading.js';
const ListWithLoading = WithLoading(List);
class App extends React.Component {
state = {
loading: false,
repos: null
}
componentDidMount() {
this.setState({ loading: true });
fetch(`https://api.github.com/users/farskid/repos`)
.then(json => json.json())
.then(repos => {
this.setState({ loading: false, repos: repos });
});
}
render() {
return (
<ListWithLoading isLoading={this.state.loading} repos={this.state.repos} />
)
}
}
the above is App.js file and below is the HOC component WithLoading
import React from 'react';
function WithLoading(Component) {
return function WihLoadingComponent({ isLoading, ...props }) {
if (!isLoading) return (<Component {...props} />);
return (<p>Be Hold, fetching data may take some time :)</p>);
}
}
export default WithLoading;
so in App.js, we are calling HOC like const ListWithLoading = WithLoading(List); and <ListWithLoading isLoading={this.state.loading} repos={this.state.repos} />, Where List is the component which is passing into the HOC. based on the sLoading prop, loding symbol is shown. Another one interesting thing is HOC dont have a render menthod! beacuse its a simple function !
By my understanding, Higher-Order-Component adds an additional layer between components or libraries for better code-reuse.
For example, you have a library file "User.class.js" that is responsible to retrive/store user data, and it's used by different components. When "User.class.js" is modified, method names changed, or parameters changed. What you gonna do? Apply changes to all those components? What if it's used by 100 different components, or even more? With Higher-Order-Component, you just need to apply the changes to one single file.