I have a below code,
export default class CampaignTrustSticky extends Component {
constructor(props) {
super(props);
this.state = {
showTrustBlock: false
};
}
render () {
let { showTrustBlock } = this.state;
return(
<section
className={classNames('trust-sticky', {
'pull-up': showTrustBlock
})}
>
</section>
)
}
}
in my test case i have used like this,
it('Render Campaing TrustKey', () => {
let wrapper = shallow(<CampaignTrustSticky />);
expect(wrapper.find('sectaion.pull-up')).not.toBe(null)
});
in this test it has been failed because of the default state value is set as false. So how can i change the state value as true from test case to succeed that case?
it('Render Campaing TrustKey', () => {
let wrapper = shallow(<CampaignTrustSticky />);
wrapper.setState({ showTrustBlock: true });
expect(wrapper.find('sectaion.pull-up')).not.toBe(null)
});
But your test code should test if your component works. You are changing the state in the test but the component doesn't change it`s state.
You should implement the functionality that change the state in your component and test this. For example a button press or something like that.
The answer by jonathanrz is correct. Although, your component isn't really written correctly. How can the state in that component change? It will always be false if it's written like that.
The component looks like something that should receive "showTrustBlock" as a prop, from a parent component.
So, the best thing would be to pass the "showTrustBlock" as a prop from a parent component, and then you can easily test it by just passing different props.
Also, if you do it like that, you can rewrite the component as a stateless functional component.
Related
I am facing issue while using useState hook with array. I checked various resources on stackoverflow, but could not fix it.
my basic code snippet looks like :
const [users, setUsers] = useState([]);
function addNewContact(user) {
const newUsers = [...users,user];
console.log(newUsers);
setUsers(newUsers);
}
<CardContainer users={users}></CardContainer>
class CardContainer extends Component {
constructor(props) {
super(props);
console.log("this -> ");
console.log(this.props.users);
this.state = {
users: this.props.users
}
}
render() {
//console.log(this.state.users)
return (
<div class="row row-cols-1 row-cols-md-2 g-4">
{
this.state.users.map(user => {
return <Card id={user.phone} title={user.name} email={user.email} phone={user.phone}></Card>
})
}
</div>
)
}
}
export default CardContainer;
I am able to see updated array in the console, but the component using it is not rendering again. Can anyone please help me on this.
The issue is due to you're storing the prop in the state of the child component, which is assigned on component initialization and component initialization/constructor only run one, until its remounted. After that, whenever, the state changes in the parent component, the child component is not re-rendering, because it uses its own state for map.
This below code only runs once on the component initialization.
this.state = {
users: this.props.users
}
In the child component, you can directly use the props and the child component will always re-render on change in the parent component. Instead of this.state.users.map you can directly map the array from props like this this.props.users.map. This way,the component will re-render on state change in the parent compoenent.
As #Junaid said, constructor is only called once before component mounting. If you really need to set a separate state inside the child component, then you can use componentDidUpdate(prevProps) react life cycle method. Make sure to compare previous and current props in order to avoid infinite loop of re-rendering.
componentDidUpdate(prevProps) {
if (this.props.users !== prevProps.users) {
this.setState({ users: this.props.users });
}
};
I have a ReactElement in my component which is rendered if a state attribute is set. Now I would like to test that behaviour by setting the state inside of my test and check if the element has been rendered afterwards. If I update the state by using setState({key: object}) on the mounted wrapper, its seems like it has no effect on my component although the state of the wrapper has been updated. Am I doing the state update at the wrong place?
MyComponent.tsx
class MyCompoonent extends React.Component {
...
render() {
....
// Render <div> if state is set
{this.state.myObject && (<div>Test me</div>)}
}
}
MyTest.tsx
...
it('should render div if state is set', () => {
// Create fake object
const fakeObject: FakeObjectType = { name: "fake" };
// Mount component
const wrapper = mount(<Component />);
// Update state
wrapper.setState({
myObject: fakeObject
}, () => {
// Prints fakeObject as part of state
console.log(wrapper.state());
// I don´t think I need that?!
wrapper.update();
// Wrapper has not been rerendered,
// <div> is still not part of the printed output
console.log(wrapper.debug());
// Test failes ;(
expect(wrapper.containsMatchingElement(<div>Test me</div>)).toBeTruthy();
}
});
I have 2 components for demonstration of my problem:
Parent:
import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row } from "react-flexbox-grid";
import Hello from "./Hello";
class App extends React.Component {
state = {
name: "Michal"
};
componentDidMount = () => {
this.setState({ name: "Tina" });
};
componentDidUpdate(prevState) {
console.log("App componentDidUpdate", prevState, this.state);
}
handleUpdate = value => {
console.log("App handleUpdate");
this.setState({ name: value });
};
render() {
return (
<Grid>
<Row>
<Hello name={this.state.name} update={this.handleUpdate} />
</Row>
</Grid>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
Child:
import * as React from "react";
class Hello extends React.PureComponent {
componentDidMount() {
// setTimeout(() => {
this.props.update("Matus");
// }, 0);
}
componentDidUpdate(prevProps) {
console.log("Hello componentDidUpdate", prevProps, this.props);
}
render() {
return <h1>Hello {this.props.name}!</h1>;
}
}
export default Hello;
In child component I want to set value in parent state via props function. But setState function is ignored, it works if props function is called from setTimeout.
Can you explain me why it work in setTimeout, why I should avoid this construction. And what is correct way to do it?
Hello component represent "Select", which in componentDidMount will fetch options and set default value.
Thank you.
Components initialise from the bottom up in React. So in your example Hello triggers componentDidMount, attempts to set the state in App via this.props.update, then App overrides it a split-second later when it calls its own componentDidMount. The name you set in the child component never reaches the state.
I'm not sure what the purpose of this is, hopefully only for leaning purposes as components shouldn't need to immediately set their own state when mounting. If you need to perform some logic before initialising the state in App you can use a constructor and do it there.
Regardless, the solution is remove the initial state setter in App.
It is not ignored and it does fire. You are just not observing it with your logs.
Check out:
https://codesandbox.io/s/kind-jackson-b2r2b?file=/src/App.js
In the console you will see the following execution order in the console window:
Hello componentDidMount props = Object {name: "Michal", update: function ()}
App handleUpdate value = Matus
App componentDidMount props = Object {}
Hello componentDidUpdate props = Object {name: "Tina", update: function ()}
App componentDidUpdate state = Object {}
Object {name: "Tina"}
Thus you will see the child componentDidMount fires and completes mount before the parent component completed and fires its componentDidMount, as components completes mounting from the child components up.
So you just never observe the state going to Matus because it triggers a new state change to Tina when it completes mounting.
You setState function from Hello component is ignored because of the React lifecycle. Basically App componentDidMount function overrides your state change from Hello component before it was rendered. That's why setTimeout helps, it moves your state change to the new rendering loop.
I don't know exact why you are trying to load data and pass it from the child component to parent but the good practice in React is to pass data from top to bottom. So the better solution would be to use Select component to just render the data from parent and react to user events.
<Select options={options} selected={option} handle={handleSelect} />
Reason:
React rendering is synchronous.
Rendering is a depth-first traversal
Now,
componentDidMount() {
this.props.update("Matus");
}
Is executed first, which sets the name Matus. Then the following executes -
componentDidMount = () => { this.setState({ name: "Tina" }); };
This sets the name Tina.
All of this happens on the first call-stack where the rendering happens. If we use setTimeout(), then
this.props.update("Matus");
will be moved to the second call-stack, which will be executed after the initial rendering and mounting has ended, thus setting the name Tina and triggering a re-render.
If you want to use class components, you need to use a constructor function to initialise state and pass the props from parent to child.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "Michal"
};
}
// ... rest of parent component
import * as React from "react";
class Hello extends React.PureComponent {
constructor(props) {
super(props)
}
componentDidMount() {
// setTimeout(() => {
this.props.update("Matus");
// }, 0);
}
componentDidUpdate(prevProps) {
console.log("Hello componentDidUpdate", prevProps, this.props);
}
render() {
return <h1>Hello {this.props.name}!</h1>;
}
}
export default Hello;
Im trying to use HOC pattern instead of Object Oriented to avoid redundant code.
The situation is simple as explained below:
In HomePage I have something like this:
const WrappedComponent = Wrapper(Wrapped);
<WrappedComponent { ...this.props } />
In the Wrapper "component", I want to expose a method called foo_method that is an Ajax Call to a WebServer. The result must be written in the state of Wrapped Component.
Now, WrappedComponent can call foo_method but when inside Wrapper, I have no scope of Wrapped state and this.props contains the props of HomePage, not wrapper so I cant create a callback function in Wrapper to be called.
Am I forgetting something in the implementation of HOC?
I think your HOC should look something like this, every WrappedComponent will get result (null while loading and API response after) in the props also wrapped component can call exposed fetch function manually via props.fetchFunction().
function Wrapper(WrappedComponent) {
const fetchData = () => {
return fetch('something');
};
return class extend React.Component {
constructor(props) {
super(props);
this.state = {
result: null,
};
}
componentDidMount() {
fetchData().then((result) => {
this.setState({result});
});
}
render() {
return (
<WrappedComponent
result={this.state.result}
fetchFunction={fetchData}
{...this.props}
/>
);
}
}
}
I think this question has been answer several time but I can't find my specific case.
https://codesandbox.io/s/jjy9l3003
So basically I have an App component that trigger an action that change a state call "isSmall" to true if the screen is resized and less than 500px (and false if it is higher)
class App extends React.Component {
...
resizeHandeler(e) {
const { window, dispatch } = this.props;
if (window.innerWidth < 500 && !this.state.isSmall) {
dispatch(isSmallAction(true));
this.setState({ isSmall: true });
} else if (window.innerWidth >= 500 && this.state.isSmall) {
dispatch(isSmallAction(false));
console.log(isSmallAction(false));
this.setState({ isSmall: false })
}
};
componentDidMount() {
const { window } = this.props;
window.addEventListener('resize', this.resizeHandeler.bind(this));
}
...
I have an other component called HeaderContainer who is a child of App and connected to the Store and the state "isSmall", I want this component to rerender when the "isSmall" change state... but it is not
class Header extends React.Component {
constructor(props) {
super(props);
this.isSmall = props.isSmall;
this.isHome = props.isHome;
}
...
render() {
return (
<div>
{
this.isSmall
?
(<div>Is small</div>)
:
(<div>is BIG</div>)
}
</div>
);
}
...
even if I can see through the console that redux is actually updating the store the Header component is not re-rendering.
Can someone point out what I am missing ?
Am I misunderstanding the "connect()" redux-react function ?
Looking at your code on the link you posted your component is connected to the redux store via connect
const mapStateToProps = (state, ownProps) => {
return {
isHome: ownProps.isHome,
isSmall: state.get('isSmall')
}
}
export const HeaderContainer = connect(mapStateToProps)(Header);
That means that the props you are accessing in your mapStateToProps function (isHome and isSmall) are taken from the redux store and passed as props into your components.
To have React re-render your component you have to use 'this.props' inside the render function (as render is called every time a prop change):
render() {
return (
<div>
{
this.props.isSmall
?
(<div>Is small</div>)
:
(<div>is BIG</div>)
}
</div>
);
}
You are doing it well in the constructor but the constructor is only called once before the component is mounted. You should have a look at react lifecycle methods: https://reactjs.org/docs/react-component.html#constructor
You could remove entirely the constructor in your Header.js file.
You should also avoid using public class properties (e.g. this.isSmall = props.isSmall; ) in react when possible and make use of the React local state when your component needs it: https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
A component is only mounted once and then only being updated by getting passed new props. You constructor is therefore only being called once before mount. That means that the instance properties you set there will never change during the lifetime of your mounted component. You have to directly Access this.props in your render() function to make updating work. You can remove the constructor as he doesn't do anything useful in this case.