Reset State on Props Change - reactjs

So, I have three components(Search, Pages, HanddlesApi) plus App.js and I'm passing props around via functions to other child components with no problem.
The Search component passes it's state of userInput to HandleApi component and updates the api using componentDidUpdate. (this works great, np here).
I added the Pages component to update the api's page number so that the user can cycle through pages of content. This works, but with issues. The user can do a search and cycle though the pages, but if they enter a new query, they will land  on the same page number of the new query. For example, If
I searched "ducks" and clicked to the next page(2). Then did a search for "dogs" they would land on page two of "dogs"
So my question is how do I reset state for my Pages component only when a user enters a new query?
I saw that componentWillReceiveProps is being deprecated, so I can't use that.
getDerivedStateFromProps  seemed like it might be a good idea, but from what I read it should only be used in rare cases.
So, the two most likely options seemed to be, use componentDidUpdate in a way I don't understand or use key?
Overall I'm just confused on what to do
In my HanddlesApi Component I'm passing the follwoing into the API:
q: this.props.inputValue ? this.props.inputValue : 'news',
page: this.props.pageNum ? this.props.pageNum: 0
then..
componentDidMount() {
this.fetchNews()
}
componentDidUpdate(prevProps, prevState) {
if (this.props.inputValue !== prevProps.inputValue || this.props.pageNum !== prevProps.pageNum) {
this.setState({
news: []
}, this.fetchNews);
}
}
Then in my Pages Component, I have
import React, { Component } from 'react'
class Pages extends Component {
constructor(props) {
super(props)
this.state = {
nextPage: 1,
prevPage: 0
}
}
handleNextClick = () => {
this.setState({
nextPage: this.state.nextPage + 1,
})
}
handlePrevClick = () => {
this.setState({
prevPage: this.state.prevPage - 1,
})
}
render() {
return (
<div className='pageNav'>
<button className="PrevButton" onClick={() => {
this.handlePrevClick()
this.props.onNextButtonClick(this.state.prevPage)
}}>Previous </button>
<button className="nextButton" onClick={() => {
this.handleNextClick()
this.props.onNextButtonClick(this.state.nextPage)
}}>Next </button>
</div>
)
}
}
export default Pages
Search Component
import React, { Component } from 'react';
class SearchBar extends Component {
constructor(props) {
super(props)
this.state = {
inputValue: ""
}
}
handleChange = (e) => {
this.setState({
inputValue: e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault()
this.props.onSubmittedSearch(this.state.inputValue)
}
render() {
//{this.props.onSubmittedSearch(this.state.inputValue)}
return (
<section>
<form onSubmit={this.handleSubmit}>
<label htmlFor="searching"></label>
<input type="text" placeholder="Search Something" value={this.state.inputValue} onChange={this.handleChange} />
<button type="submit">Search </button>
</form>
</section>
)
}
}
export default SearchBar
App.js
class App extends Component {
constructor(props) {
super(props)
this.state = {
inputValue: null,
pageNum: 1
}
}
// used to pass props from SearchBar to NewsList
onSubmittedSearch = (inputValue) => {
this.setState({
inputValue: inputValue
})
}
onNextButtonClick = (pageNum) => {
this.setState({
pageNum: pageNum
})
}
render() {
return (
<main>
<SearchBar onSubmittedSearch={this.onSubmittedSearch} />
<NewsList inputValue={this.state.inputValue} pageNum={this.state.pageNum} />
<Pages onNextButtonClick={this.onNextButtonClick} />
<Footer />
</main>
)
}
}
export default App;

You should let App in charge of changing and holding the current page number. So you can reset it each time your search component submit. Here is a working exemple:
class Pages extends React.Component {
render() {
return (<div className='pageNav'>
<button disabled={this.props.page <= 1} className="PrevButton" onClick={this.props.onPrevButtonClick}>Previous
</button>
<span>{this.props.page}</span>
<button className="nextButton" onClick={this.props.onNextButtonClick}>Next
</button>
</div>)
}
}
class SearchBar extends React.Component {
constructor(props) {
super(props)
this.state = {
inputValue: ""
}
}
handleChange = (e) => {
this.setState({inputValue: e.target.value})
}
handleSubmit = (e) => {
e.preventDefault()
this.props.onSubmittedSearch(this.state.inputValue)
}
render() {
//{this.props.onSubmittedSearch(this.state.inputValue)}
return (<section>
<form onSubmit={this.handleSubmit}>
<label htmlFor="searching"></label>
<input type="text" placeholder="Search Something" value={this.state.inputValue} onChange={this.handleChange}/>
<button type="submit">Search
</button>
</form>
</section>)
}
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
inputValue: null,
pageNum: 1
}
}
// used to pass props from SearchBar to NewsList
onSubmittedSearch = (inputValue) => {
this.setState({inputValue: inputValue, pageNum: 1})
}
onNextButtonClick = () => {
this.setState(state => ({
pageNum: state.pageNum + 1
}))
}
onPrevButtonClick = (pageNum) => {
this.setState(state => ({
pageNum: Math.max(state.pageNum - 1, 1)
}))
}
render() {
return (<main>
<SearchBar onSubmittedSearch={this.onSubmittedSearch}/>
<Pages onNextButtonClick={this.onNextButtonClick} onPrevButtonClick={this.onPrevButtonClick} page={this.state.pageNum}/>
</main>)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>

Related

React Api call: Displaying only 1st onSubmit but nothing after

I have two components, CryptoPrice with a coin prop which calls an API to get the price, and Nav where I search for a coin, and it renders the CryptoPrice component assigning the onSubmit value to CryptoPrice coin prop.
The display works good until I do a second onSubmit from the Nav. When I do a second onSubmit, nothing changes.
App.js code:
import CryptoPrice from "./components/CryptoPrice";
import Nav from "./components/Nav";
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Crypto Prices</h1>
<div className="flex">
<CryptoPrice coin="bitcoin" />
<CryptoPrice coin="ethereum" />
</div>
<div>
<Nav></Nav>
</div>
</header>
</div>
);
}
CryptoPrice component:
import styles from "./css/CryptoPrice.module.css";
export default class CryptoPrice extends React.Component {
constructor(props) {
super(props);
this.state = {
price: [],
url: `https://api.coingecko.com/api/v3/simple/price?ids=${this.props.coin}&vs_currencies=usd`,
};
}
componentDidMount = () => {
this.loadData();
setInterval(this.loadData, 20000);
};
loadData = () => {
fetch(this.state.url)
.then((response) => response.json())
.then((data) => {
let key = Object.keys(data);
return data[key];
})
.then((coin) => {
let price = coin.usd;
this.setState({ price });
});
};
render() {
return (
<div className={styles.padding}>
<h2>{this.props.coin} price</h2>
<div>{this.state.price}$</div>
</div>
);
}
}
Nav Component
import CryptoPrice from "./CryptoPrice";
export default class Nav extends React.Component {
constructor(props) {
super(props);
this.state = {
coin: "",
isSubmitted: false,
};
}
componentDidMount() {
this.setState({ isSubmitted: false });
}
render() {
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault();
this.setState({ isSubmitted: true });
}}
>
<input
type="text"
onChange={(e) => {
this.setState({ coin: e.target.value });
}}
></input>
<input type="submit" value="Add"></input>
</form>
{this.state.isSubmitted && <CryptoPrice coin={this.state.coin} />}
</div>
);
}
}
Thanks so much for any help/feedback
Your issue is because you are setting the url in state so it will not update when the props update. Try changing you fetch function to use props directly(also remember to clear the setInterval when you unmount):
loadData = () => {
fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${this.props.coin}&vs_currencies=usd`)
.then((response) => response.json())
.then((data) => {
let key = Object.keys(data);
return data[key];
})
.then((coin) => {
let price = coin.usd;
this.setState({ price });
});
};

my users details is not is not rendering users list when i type in search

there is one more error TypeError: Cannot destructure property 'handleShow' of 'object null' as it is null.
output when i consoled log is
pr
SearchModal.js:35 {username: "pr"}
SearchModal.js:38 [{…}]0: {id: "602df77cea2b563d7ceda4ac", username: "pratik", email: "pratik#gmail.com"}length: 1__proto_: Array(0)
also it is not searching when i type p its giving searc:'' and when i add prat then search : 'pra' only
Also it is not rendering username just check userdetails.map it is console logging the details but not rendering on page
import React, { Component } from 'react';
import { SearchUser } from '../services/SearchService';
import {Modal} from 'react-bootstrap';
class SearchModal extends Component {
constructor(props){
super(props);
this.state = {
show: false,
search: '',
userdetails:[]
}
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.onTextboxChangeSearch = this.onTextboxChangeSearch.bind(this);
}
handleShow() {
this.setState({ show: true })
}
handleClose(){
this.setState({ show: false })
}
async onTextboxChangeSearch(event) {
this.setState({
search: event.target.value
});
let {search,userdetails} = this.state;
console.log(search)
const data = {username:search};
console.log(data)
let SearchStatus = await SearchUser(data);
userdetails=SearchStatus.user
console.log(userdetails);
}
render() {
let {search,userdetails}= this.state;
return (
<div>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>
<input
type="text"
placeholder="Search.."
value={search}
onChange={this.onTextboxChangeSearch}
></input>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h3>Users</h3>
<div>
<ul>
{userdetails.map(element => {
<li>{element.username}</li>
})}
</ul>
</div>
</Modal.Body>
</Modal>
</div>
)
}
}
export default SearchModal;
Dashboard
import React, { Component } from 'react';
import { Link,Redirect } from 'react-router-dom';
import UserService from "../services/userservice";
import SearchModal from './SearchModal'
export default class Dashboard extends Component{
constructor(props) {
super(props);
this.state = {
currentUser: UserService.getCurrentUser(),
isLoading:false,
};
this.logOut = this.logOut.bind(this);
this.onClick = this.onClick.bind(this);
}
logOut() {
UserService.logout()
}
SearchModalRef = ({handleShow}) => {
this.showModal = handleShow;
}
onClick = () => {
this.showModal();
}
render(){
const { currentUser ,isLoading } = this.state;
console.log(currentUser)
if (isLoading) {
return (<div><p>Loading...</p></div>);
}
if(!currentUser){
return(
<div>
<Redirect to='/login' />
</div>
)
}
else{
return(
<div>
<header>
<h1>Dashboard</h1>
{' '}
<div>
<Link to={`/dashboard/profile/:${currentUser.user._id}`}>Profile</Link>
</div>
{' '}
<div>
<Link to="/login" onClick={this.logOut}>LogOut</Link>
</div>
{' '}
<SearchModal ref={this.SearchModalRef} ></SearchModal>
<button type="button" onClick={this.onClick}>
Search
</button>
</header>
<div>
</div>
</div>
);
}
}
}
Issue
it is not searching when i type p its giving searc:'' and when i add
prat then search : 'pra' only
React state updates are asynchronous and batch processed between render cycles. This means when you enqueue a state update it won't be available until the next render cycle. Any further references to state in the same function will be the state value from the current render cycle.
async onTextboxChangeSearch(event) {
this.setState({
search: event.target.value // <-- next state
});
let {search,userdetails} = this.state; // <-- still current state!
console.log(search)
const data = {username:search};
console.log(data)
let SearchStatus = await SearchUser(data);
userdetails=SearchStatus.user
console.log(userdetails);
}
Solution
I suggest factoring out the search logic into its own function to be called by the componentDidUpdate lifecycle methods when state updates.
onTextboxChangeSearch(event) {
const { value } = event.target;
this.setState({
search: value // <-- (1) update state
});
}
searchForUser = async () => { // <-- (3) refactored search function
const { search, userdetails } = this.state;
const data = { username: search };
const { user } = await SearchUser(data);
this.setState(prevState => ({
userdetails: [...prevState.userdetails, user], // append user
}));
}
componentDidUpdate(prevProps, prevState) {
if (prevState.search !== this.state.search) {
this.searchForUser(); // <-- (2) search state updated, do search for user
}
}

React, problem with passing state as props

So I am quite new to React world, and I have this problem I am trying to solve, but I don't quite understand why it is happening.
So I want to pass the state of component to parent component and from parent component to child component and everything look okay, and in console log the state goes trough, but nothing changes. I believe there is a way I need to listen for state change or something within child component so it works. If I put true in the parent component, child component also get's true, but if I toggle it on click, it goes trough but nothing changes in the child component.
Also I understand my code is little rough right now ill reafactor it later, but right now I am trying to understand why it does not work.
If anyone could help me I would be thankful for it.
This is component that controls the state.. So the state passes from TurnOnBtn to App and from App it goes to TodoList
import "./Todo.css";
class TurnOnBtn extends Component {
constructor(props) {
super(props);
this.state = { display: false };
this.handleState = this.handleState.bind(this);
}
handleState() {
this.setState({ display: !this.state.display });
this.props.checkDisplay(this.state.display);
}
render() {
return (
<button onClick={this.handleState} className="TurnOnBtn">
<i className="fa fa-power-off"></i>
</button>
);
}
}
export default TurnOnBtn;
parent component App
import TurnOnBtn from "./TurnOnBtn";
import TheMatrix from "./TheMatrxHasYou";
import TodoList from "./TodoList";
import { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = { display: true };
this.checkDisplay = this.checkDisplay.bind(this);
}
checkDisplay(newDisplay) {
this.setState({
display: newDisplay,
});
console.log(this.state);
}
render() {
return (
<div className="App">
<TodoList display={this.state.display} />
<TheMatrix />
<TurnOnBtn checkDisplay={this.checkDisplay} />
</div>
);
}
}
export default App;
child component TodoList
import Todo from "./Todo";
import NewTodoForm from "./NewTodoForm";
import { v4 as uuid } from "uuid";
import "./Todo.css";
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
todos: [],
displayOn: this.props.display,
};
this.newTodo = this.newTodo.bind(this);
this.editTodo = this.editTodo.bind(this);
this.deleteTodo = this.deleteTodo.bind(this);
}
editTodo(id, updatedTask) {
const updatedTodo = this.state.todos.map((todo) => {
if (todo.id === id) {
return { ...todo, todo: updatedTask };
}
return todo;
});
this.setState({
todos: updatedTodo,
});
console.log(updatedTask);
}
deleteTodo(id) {
this.setState({
todos: this.state.todos.filter((todo) => todo.id !== id),
});
}
newTodo(newState) {
this.setState({
todos: [...this.state.todos, { ...newState }],
});
}
render() {
return (
<div
style={this.state.displayOn ? { opacity: 1 } : { opacity: 0 }}
className="Todo-screen"
>
{" "}
<div className="TodoList">
<div className="TodoList-todos">
{" "}
{this.state.todos.map((todo) => (
<Todo
key={uuid()}
id={todo.id}
active={todo.active}
editTodo={this.editTodo}
deleteTodo={this.deleteTodo}
todoItem={todo.todo}
/>
))}
</div>
</div>{" "}
<NewTodoForm newTodo={this.newTodo} />
</div>
);
}
}
export default TodoList;
The bug here is in these line of codes:
handleState() {
this.setState({ display: !this.state.display });
this.props.checkDisplay(this.state.display);
}
Remember setState is an async function, so by the time you set a new state using setState, the value for this.state is not guaranteed changed.
One way to fix this is using the setState callback, which will run after the state is changed:
handleState() {
this.setState({ display: !this.state.display }, function() {
this.props.checkDisplay(this.state.display);
});
}
But you don't need to use another state to keep display state in TurnOnBtn as you can pass the toggle callback from the parent:
App.js
class App extends Component {
constructor(props) {
super(props);
this.state = { display: true };
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState({
display: !this.state.display,
});
}
render() {
return (
<div className="App">
<TodoList display={this.state.display} />
<TheMatrix />
<TurnOnBtn toggleDisplay={this.toggleDisplay} />
</div>
);
}
}
TurnOnBtn.js
class TurnOnBtn extends Component {
constructor(props) {
super(props);
this.handleState = this.handleState.bind(this);
}
handleState() {
this.props.toggleDisplay();
}
render() {
return (
<button onClick={this.handleState} className="TurnOnBtn">
<i className="fa fa-power-off"></i>
</button>
);
}
}

Cannot Read Property 'state' of undefined for this.state

I'm new to react and I was wonder why I keep getting this cannot read property value of "undefined" error. When i consolelog the this.state.username and this.state.todoList I can see that states updating but only after I clicked the submit button it gives me the error.
Any suggestions? Thank you!
import React, { Component } from "react";
import axios from "axios";
export default class TestNote extends Component {
constructor(props) {
super(props);
this.onChangeUsername = this.onChangeUsername.bind(this);
this.onChangeTodoList = this.onChangeTodoList.bind(this);
this.state = {
username: "",
todoList: "",
};
}
onChangeUsername(e) {
this.setState({
username: e.target.value,
});
console.log(this.state.username);
}
onChangeTodoList(e) {
this.setState({
todoList: e.target.value,
});
}
onSubmit(e) {
e.preventDefault();
const todoList = {
username: this.state.username,
todoList: this.state.todoList,
};
console.log(todoList);
axios
.post("http://localhost:5000/list/add", todoList)
.then((res) => console.log(res.data));
}
render() {
return (
<div className="container">
<form>
<label>Username: </label>
<input
type="text"
required
value={this.state.username}
onChange={this.onChangeUsername}
/>
<label>TodoList: </label>
<input
type="text"
value={this.state.todoList}
onChange={this.onChangeTodoList}
/>
<input type="submit" value="Add This List" onClick={this.onSubmit} />
</form>
</div>
);
}
}
Your onSubmit are losing this context. You should try one of these methods, but I recommend you using arrow function.
You should .bind(this) to onSubmit
...
<input type="submit" value="Add This List" onClick={this.onSubmit.bind(this)} />
...
Defined onSubmit as an arrow function
...
onSubmit = (e) => {
e.preventDefault();
const todoList = {
username: this.state.username,
todoList: this.state.todoList,
};
}
...
You did not bind onSubmit function/method to this, therefore this has no context and would return undefined. You can bind this to onSubmit in the constructor to fix the error.
Another way to avoid having to bind this is to use arrow functions for your class methods/functions as they automatically bind this to that function, you won't have to worry about doing it yourself.
constructor(props) {
super(props);
this.state = {
username: "",
todoList: ""
};
// this.onChangeUsername = this.onChangeUsername.bind(this);
// this.onChangeTodoList = this.onChangeTodoList.bind(this);
// this.onSubmit = this.onSubmit.bind(this);
}
onChangeUsername = e => {
this.setState({
username: e.target.value
});
console.log(this.state.username);
};
onChangeTodoList = e => {
this.setState({
todoList: e.target.value
});
};
onSubmit = (e) => {
e.preventDefault();
const todoList = {
username: this.state.username,
todoList: this.state.todoList
};
When you define function in your component without using arrow function you have to bind to each function the this keyword in the constructor for that function to consider each reference of this in if definition to refer to the created component.
Here is the definition of the bind method
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
So if you have component Home define like this
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "Jeanne Doe"
}
}
handleChangeName () {
this.setState({name: "John Doe"});
}
render() {
return <div>
<h2>Welcome {this.state.name}</h2>
<button onClick={this.handleChangeName}>Change name</button>
</div>
}
}
ReactDOM.render(<Home />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Here you get the error that tell you "TypeError: this is undefined"
So to fix that you have to use bind like this
class Home extends React.Component {
constructor(props) {
super(props)
this.state = {
name: "Jeanne Doe"
}
this.handleChangeName = this.handleChangeName.bind(this);
}
handleChangeName () {
this.setState({name: "John Doe"});
}
render() {
return <div>
<h2>Welcome {this.state.name}</h2>
<button onClick={this.handleChangeName}>Change name</button>
</div>
}
}
ReactDOM.render(<Home />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Or to completely avoid the use of bind as you can have so many methods define in your component you can use arrow function which look like this
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "Jeanne Doe"
}
}
const handleChangeName = () => {
this.setState({name: "John Doe"});
}
render() {
return <div>
<h2>Welcome {this.state.name}</h2>
<button onClick={this.handleChangeName}>Change name</button>
</div>
}
}

EventHandler with React Routing

I have a nested route in react with react-router plugin and want to connect the ui with some functionality
class MyLogin extends React.Component {
constructor(props){
super(props);
this.state={
email:'',
password:''
}
}
login() {
alert("OK");
}
}
and the ui
const Login = ({ match }) => {
return (
...
<TextField
hintText="Email eingeben"
type="email"
floatingLabelText="Email"
onChange = {(event,newValue) =>
MyLogin.setState({email:newValue})}
/>
...
<RaisedButton label="Anmelden" primary={true} /*style={style}*/ onClick={ MyLogin.login }/>
...
So how can i get access to state variables and bind the event handler from the button to my own code?
Well, if you want to access another component inside a component you can use ref for that. But refs shouldn't be overused. I provide this example only for educational purposes (you should probably rework your app to follow good patterns).
class MyLogin extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
login() {
alert("OK");
}
render() {
return null;
}
}
const Login = ({ match, MyLoginRef }) => {
if (!MyLoginRef) return null;
return (
<>
<input
type="email"
onChange={event =>
MyLoginRef.setState({ email: event.currentTarget.value })
}
/>
<button label="Anmelden" onClick={MyLoginRef.login} />
</>
);
};
class App extends React.Component {
state = {}
refFn = (el) => (this.setState({el}))
render() {
console.log(this.el);
return (
<div className="App">
<MyLogin ref={this.refFn}/>
<Login MyLoginRef={this.state.el} />
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
live demo on codesandbox.io https://codesandbox.io/s/kmv6x4j237

Resources