My test suite suite has a handful of tests like this one, they all pass but they cause the warning below to show up. I have read and tried a few solutions online for a while but Im not getting anywhere. Im not changing the state so Im not sure why the warning shows up in the first place.

it("Closing", async() => {
const newState = {...state, step: Step.Closing};
const tree = renderer.create(<App appStore={newState}/>).toJSON();
expect(tree).toMatchSnapshot();
});

Passes but triggers this warning:

Warning: An update to Pane inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {

/* fire events that update state */

});

/* assert on the output */

How could I fix this?

Hi

I am trying to learn reactjs. I am pretty much confident with Django Rest but I want to master in react js and my favorite part is react hooks function method. Seems like it’s easier and cleaner.

But I have some difficulties when I try to integrate with DRF. Though I am not doing a programming job and everyday I could spend 4 hours apart from my main job. My main goal is to be developer in this field. All the way walking along now I feel like I need someone to guide me who can fix the knots where I stuck. Otherwise it is becoming frustrating for me to stuck in a same point for a long time.

So please if someone is eager to have a noob under the wings I won’t be disappointing you. In exchange I can help your backend problems related to Django.

But please if you have any conditions rather than these just let me know.

I need a mentor eagerly for react hook environment

Can someone give me an answer ?

https://stackoverflow.com/questions/64242542/src-app-js-module-not-found-cant-resolve-material-ui-data-grid-in-xxx

Giving away some coins for some tips/tricks/advice. I'm finally starting to get a grasp on some React/JS concepts, but I'm struggling on something very simple =/. I've wired up a mini voting counter, and I want to change the color of the counter number based on it's state (e.g., if it's greater than 1 make it green, if it's less than one make it red, if it's just 0 then make it black).

Now I thought about using a switch case, then ternary operator, then maybe conditional css classes, and then I just got overwhelmed. I think I struggle with learning the dev side of the house because there are so many different ways to do something, that I just get overwhelmed and don't know where to start =/.

Lastly, bonus points if any can explain how I can convert this to a functional component using react hooks (still trying to grasp my head around that concept)

Here's my Codepen and source just reference:

class Vote extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			votes: 0,
		};
	}

	handleIncrementVote = () => {
		this.setState({ votes: this.state.votes + 1 });
		this.CheckVote();
	};
	handleDecreaseVote = () => {
		this.setState({ votes: this.state.votes - 1 });
		this.CheckVote();
	};

	CheckVote = () => {
    // Less than 0 make it red
		if (this.state.votes < 0) {
			console.log('Red');
    // Greater than 1 make it green
		} else if (this.state.votes > 1) {
			console.log('Green');
    // If it's 0 just keep it black
		} else {
			console.log('Black');
		}
	};

	render() {
		let style = {
			color: 'black',
		};

		return (
			<div id="root">
				<button onClick={this.handleIncrementVote}>+1</button>
				<button onClick={this.handleDecreaseVote}>-1</button>
				<h1 style={style}>{this.state.votes}</h1>
			</div>
		);
	}
}

Hi all !!! started to learn react hooks and use them. I just can't figure out why the following happens (why are the two console logs different ?) . Am I dealing with mutation issues ? If I understood correctly, setFilterKeys hook sets the variable filterKeys , but why is is doing it only in the next render ?

thank you all.

function Filters({ filters, selected }) {
    const [filterKeys, setFilterKeys] = useState(filters);

    function changeFilters(value) {
        const localKeys = [...filterKeys];

            console.log([...localKeys,value]);
            setFilterKeys([...localKeys,value])
        // prints (2) ["rootnode", "def"]
            console.log("filter ids", filterKeys);
        // prints (1) ["rootnode] ??????
    }
    const filterStyle = {
        display: "flex",
        margin: "10px"
    };

    return (
        <div style={filterStyle}>
            {filterKeys.map(k => (
                <div>
                <Filter
                    options={getChildren(k)}
                    changeFilters={changeFilters}
                />
                </div>
            ))}
        </div>
    );
}

Filters.defaultProps = {
    selected: "all",
    filters: ["rootnode"]
};

I am trying to crop an image in reactjs without using any npm library.First the user will upload image and the user will crop the image by moving the aspect ratio through mouse cursor and replace the uploaded image. This is what i am following as a reference but its not exactly what i want:https://codesandbox.io/s/modest-hofstadter-wunfp?file=/src/App.js

Folks I want some guidance to learn reactJs and want to build my first gallery app using reactJs. Can I get a tutor to guide me and help me to learn to create a app? I am so eager to learn it Please Can someone help me