React component not rendering without an event

React component not rendering without an event - javascript

I'm learning React and is doing a personal project where i'm creating a chatbot with api.ai agent. I'm using api.ai npm package in my project where the user can ask a question and my agent will reply to the answer based on the question.I'm getting the response correctly from the agent, but the response is not rendered in the page until there is keypress event.
Below is my code
import React, {
Component
} from 'react';
import ChatMessageComposer from
'../ChatMessageComposer/ChatMessageComposer';
import ChatHistory from '../ChatSection/ChatHistory/ChatHistory';
import apiai from 'apiai-promise';
class Chat extends Component {
state = {
messages: [], //[{from: 'bot', message: 'Hi'}]
inputValue: ''
}
atKeyPress = (event) => {
if (event.key !== 'Enter') {
return;
}
this.setState((prevState) => {
prevState.messages.push({
message: this.state.inputValue,
from: 'you'
})
})
let data = this.state.inputValue;
var app = apiai("");
app.textRequest(data, {
sessionId: ''
}).then((response) => {
console.log(response);
this.setState((prevState) => {
prevState.messages.push({
message: response.result.fulfillment.speech,
from: 'bot'
})
})
}).catch((error) => {
console.log(error);
})
this.setState({
inputValue: ''
});
}
render() {
console.log("here ", this.state.messages)
return (<
div >
<
ChatHistory messages={
this.state.messages
} > < /ChatHistory> <
ChatMessageComposer
changed={
(event) => this.setState({
inputValue: event.target.value
})
}
atKeyPress={
(event) => this.atKeyPress(event)
}
value={
this.state.inputValue
}
>
< /ChatMessageComposer> <
/div>
)
}
}
export default Chat;
This is chatmessagecomposer component,
export default Chat;
const chatMessageComposer = (props) => {
return (
<div className={classes.Chatinput}>
<input placeholder="Talk to me..." className={classes.Userinput} type="text" value={props.value} onChange={props.changed} onKeyPress= {props.atKeyPress}/>
</div>
)
}
const chatHistory = (props) => (
<div className={classes.ChatOutput}>
{props.messages.map((message, i)=>(
<ChatMessage key={i} message={message} />
))}
</div
Any help will be appreciated

You are not returning the mutated state in your setState method call. Try doing this
this.setState((prevState) => {
prevState.messages.push({
message: response.result.fulfillment.speech,
from: 'bot'
})
return prevState;
})

Related

React Unmounted Component State Update Error

I have the following components in react:
PublicProfile.js:
import React, { Component } from 'react';
import axios from 'axios'
import Post from '../posts/Post'
import Navbar from '../Navbar'
import FollowButton from './FollowButton'
import { Avatar, Button, CircularProgress } from '#material-ui/core'
class PublicProfile extends Component {
constructor(props) {
super(props);
this.state = {
user: {},
followers: undefined,
following: undefined,
posts: [],
showFollowers: false,
showFollows: false,
curr_id: null
}
this.handleFollowerClick = this.handleFollowerClick.bind(this)
this.handleFollowClick = this.handleFollowClick.bind(this)
}
componentDidMount() {
const { user_id } = this.props.match.params
axios.get(`http://127.0.0.1:8000/users/${user_id}`)
.then(res =>
this.setState({
user: res.data,
followers: res.data.followers.length,
following: res.data.following.length
}))
.catch(err => console.log(err))
axios.get(`http://127.0.0.1:8000/posts/user/${user_id}`)
.then(res => {
this.setState({ posts: res.data })
})
.catch(err => console.log(err))
axios.get('http://127.0.0.1:8000/users/self')
.then(res => this.setState({curr_id: res.data.id}))
.catch(err => console.log(err))
}
handleFollowerClick(e) {
e.preventDefault()
if (this.state.showFollowers === true) {
this.setState({showFollowers: false})
} else {
this.setState({showFollowers: true})
}
}
handleFollowClick(e) {
e.preventDefault()
if (this.state.showFollows === true) {
this.setState({showFollows: false})
} else {
this.setState({showFollows: true})
}
}
render() {
const showFollowers = this.state.showFollowers
const showFollows = this.state.showFollows
let followers
let follows
let edit
let fbutton
if (showFollowers === true) {
followers = (
<div>
<p>Followed by:</p>
<ul>
{this.state.user.followers.map(follower => (
<li key={follower.id}><a href={`/users/${follower.user.id}`}>{follower.user.username}</a></li>
))}
</ul>
</div>
)
}
if (showFollows === true) {
follows = (
<div>
<p>Follows:</p>
<ul>
{this.state.user.following.map(follow => (
<li key={follow.id}><a href={`/users/${follow.user.id}`}>{follow.user.username}</a></li>
))}
</ul>
</div>
)
}
if (this.state.user.id === this.state.curr_id) {
edit = <Button href='/profile'>Edit My Profile</Button>
}
if (this.state.user.id !== this.state.curr_id) {
fbutton = <FollowButton user={this.state.user} followers_num={this.state.followers} setParentState={state => this.setState(state)} />
}
if (this.state.user.id !== undefined) {
return (
<div style={{background: '#f7f4e9'}}>
<Navbar />
<div style={{height: '70px'}}></div>
<div>
<Avatar style={{width: 75, height: 75}} variant='rounded' src={this.state.user.pp} alt={this.state.user.username} />
<h1>{this.state.user.username}</h1>
<h3>#{this.state.user.username}</h3>
<h4>{this.state.posts.length} Post(s)</h4>
<p>{this.state.user.bio}</p>
<Button style={{marginLeft: '10px'}} disabled={!this.state.following} onClick={this.handleFollowClick}>{this.state.following} Follows</Button>
<Button disabled={!this.state.followers} onClick={this.handleFollowerClick}>{this.state.followers} Followers</Button>
{followers}
{follows}
</div>
{edit}
{fbutton}
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
}}>
{this.state.posts.map(post => (
<Post key={post.id} post={post} />
))}
</div>
<div style={{height: '15px'}}></div>
</div>
)
} else {
return (
<div>
<Navbar />
<CircularProgress />
</div>
)
}
}
}
export default PublicProfile
FollowButton.js:
import React, { Component } from 'react';
import axios from 'axios'
import { Button } from '#material-ui/core'
class FollowButton extends Component {
constructor(props) {
super(props);
this.state = {
followsUser: null
}
this.unfollowClick = this.unfollowClick.bind(this)
this.followClick = this.followClick.bind(this)
}
componentDidMount() {
if (this.props.user.id !== undefined) {
axios.get(`http://127.0.0.1:8000/users/check/${this.props.user.id}`)
.then(res => {
this.setState({ followsUser: res.data.follows })
})
.catch(err => console.log(err))
}
}
unfollowClick() {
axios.delete(`http://127.0.0.1:8000/users/${this.props.user.id}/unfollow/`)
.then(() => {
this.setState({ followsUser: false })
this.props.setParentState({followers: this.props.followers_num - 1})
})
.catch(err => console.log(err))
}
followClick() {
axios.post(`http://127.0.0.1:8000/users/${this.props.user.id}/follow/`)
.then(res => {
this.setState({ followsUser: true })
this.props.setParentState({followers: this.props.followers_num + 1})
})
.catch(err => console.log(err))
}
// user: {
// followers: [...this.props.user.followers, res.data.user]
// }
render() {
let button
if (this.state.followsUser) {
button = <Button style={{background: 'blue'}} onClick={this.unfollowClick}>Following</Button>
} else {
button = <Button onClick={this.followClick}>Follow</Button>
}
return (
<div style={{marginTop: '20px'}}>
{button}
</div>
);
}
}
But I get the following error:
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in FollowButton (at PublicProfile.js:93)
I have found that this error is largely due to unresolved process when unmounting the component, but I am not even rendering the component in this case due to the conditional, but I still seem to get the error. Can someone please help me fix it.

You are not cancelling axios request when component unmounted. Axios accepts cancelToken as a parameter, you should create a CancelTokenSource which provides a method cancel and then cancel the Source when component unmounts which cancels all pending request.

Here's the syntax of how to use async/await:
const unfollowClick = async() => {
try{
const res = await axios.delete(`http://127.0.0.1:8000/users/${this.props.user.id}/unfollow/`);
this.setState({ followsUser: false });
this.props.setParentState({followers: this.props.followers_num - 1});
}
catch(err) { console.log(err)}
}

Why changes from local state don't go into global state?

To-Do-List
When I try to edit my created task, I see some modifications, but only in local State. When I look at the data of the global state, nothing change, the data remains the same as after creating the tasks object.
It is also interesting to note that when case EDIT_TASK has worked , action.id = values from Input, and action.task = undefined
P.S: Put all the component code below, maybe there was a mistake somewhere.
P.S: Sorry for ENG
Component's code
import React from 'react'
import s from "./../../App.module.css";
class Item extends React.Component {
state = {
statusChange: false,
task: this.props.task
}
activeStatusChange = () => {
this.setState( {
statusChange: true
}
);
}
deActivateStatusChange = () => {
this.setState( {
statusChange: false
}
);
this.props.editTask(this.props.task)
}
onStatusChange = (e) => {
this.setState({
task: e.target.value
})
}
render(){
return (
<div className={s.item}>
<span onClick={this.props.editStatus} className={s.statusTask}>
{this.props.status ? <img src="https://img.icons8.com/doodle/48/000000/checkmark.png"/>
: <img src="https://img.icons8.com/emoji/48/000000/red-circle-emoji.png"/>}
</span>
{ this.state.statusChange
? <input onChange={this.onStatusChange} autoFocus={true} onBlur={this.deActivateStatusChange} value={this.state.task} />
: <span className={this.props.status === true ? s.task : s.taskFalse} onClick={this.activeStatusChange}> {this.state.task} </span>}
<span onClick={this.props.deleteTask} className={s.close}><img src="https://img.icons8.com/color/48/000000/close-window.png"/></span>
</div>
)
}
}
export default Item;
Reducer's code
import React from 'react'
import shortid from 'shortid';
const ADD_TASK = 'ADD_TASK'
const EDIT_TASK = 'EDIT_TASK'
const initialState = {
tasks: []
};
const mainReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TASK: {
return {
...state,
tasks: [{
id: shortid.generate(),
task: action.task,
status: false
}, ...state.tasks]
}
}
case EDIT_TASK: {
return {
...state,
tasks: state.tasks.filter((t) => t.id === action.id ? {...t, task: action.newTask} : t)
}
}
default:
return state
}
}
//window.store.getState().mainReducer.tasks
export const addTask = task => ({type: 'ADD_TASK', task});
export const editTask = (id,newTask) => ({type: 'EDIT_TASK', id, newTask})
export default mainReducer;
Parent's component:
import React from "react";
import s from "./../../App.module.css";
import CurrentTasks from "../current-tasks";
import FilterButtonTasks from "../filter-button-tasks";
import ListTasks from "../tasks-list";
class SetForm extends React.Component {
constructor(props) {
super(props);
this.state = {
text: ''
}
}
onInputChange = event => {
this.setState({
[event.target.name]: event.target.value
})
}
handleSubmit = event => {
event.preventDefault();
if(this.state.text === '') {
return undefined
}
this.props.addTask(this.state.text)
this.setState({
text: ''
})
}
filterTasks = (tasks, activeFilter) => {
switch (activeFilter) {
case 'done': {
return tasks.filter(task => task.status);
}
case 'active': {
return tasks.filter(task => !task.status)
}
default:
return tasks;
}
}
render() {
const currentTasks = this.filterTasks(this.props.tasks, this.props.filter);
return (
<div>
<form onSubmit={this.handleSubmit}>
<div>
<input name={"text"} onChange={this.onInputChange} value={this.state.text}placeholder={"Set your task"} className={s.setTask}/>
<button onClick={this.handleSubmit} className={s.add}>ADD</button>
<button onClick={this.props.removeAllTasks} className={s.clearAll}>Clear</button>
</div>
</form>
<CurrentTasks tasks={this.props.tasks}/>
<ListTasks currentTasks={currentTasks} editStatus={this.props.editStatus} deleteTask={this.props.deleteTask} editTask={this.props.editTask}/>
<FilterButtonTasks currentTasks={currentTasks} changeFilter={this.props.changeFilter} removeAllDone={this.props.removeAllDone}/>
</div>
)
}
}
export default SetForm;
one more:
import React from 'react'
import Item from './SetItem/item'
const ListTasks = ({currentTasks,editStatus,deleteTask,editTask}) => {
return (
currentTasks.map(t => (<Item editStatus={() => editStatus(t.id)}
deleteTask={() => deleteTask(t.id)}
key={t.id} task={t.task} status={t.status} editTask={editTask}/>))
)
}
export default ListTasks;

Since, you are only updating the local state onStatusChange the state does not get updated in global state. So on deActivateStatusChange you need to call this.props.editTask with updated state, that is this.state.task
deActivateStatusChange = () => {
this.setState({
statusChange: false
});
this.props.editTask(this.state.task); // change is here
};
The problem is in your EDIT_TASK reducer:
Change
state.tasks.filter((t) => t.id === action.id ? {...t, task: action.newTask} : t)
To
state.tasks.map((t) => t.id === action.id ? {...t, task: action.newTask} : t)
map will update the object, not filter
Code should be:
case EDIT_TASK: {
return {
...state,
tasks: state.tasks.map((t) => t.id === action.id ? {...t, task: action.newTask} : t)
}
}
Also it seems like you are not passing id and newTask to editTask action:
const ListTasks = ({ currentTasks, editStatus, deleteTask, editTask }) => {
return currentTasks.map(t => (
<Item
editStatus={() => editStatus(t.id)}
deleteTask={() => deleteTask(t.id)}
key={t.id}
task={t.task}
status={t.status}
editTask={(newTask) => editTask(t.id, newTask)} // change current code to this
/>
));
};

Why is one of my child components able to get handleClick() but the others are not?

PROBLEM
I am swapping components based on state in Dashboard(parent) component and passing props to all of them. When I log in using wholesaler the app is running without problems but when i log in with retailer account the app return
TypeError: this.props.handleClick is not a function
when i click on a button-handleClick() -> switch components through handleClick which changes state
My components are almost identical and i have no idea where this is coming from.
Thank you in advance! :)
Files:
Dashboard.js
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { Retailers } from './_components/Retailers'
import { Locations } from './_components/Locations'
import { Products } from './_components/Products'
class Dashboard extends Component {
constructor(props) {
super(props)
this.state = {
chosenRetailerId: null,
chosenLocationId: null,
mountComponent: ''
}
this.handleClick = this.handleClick.bind(this)
}
componentDidMount() {
switch (this.props.user.type) {
case 'wholesaler':
this.setState({ mountComponent: "retailers" })
break;
case 'retailer':
this.setState({ mountComponent: "locations" })
break;
case 'location':
this.setState({ mountComponent: "products" })
break;
default:
break;
}
}
handleClick(id, shouldMountComponent) {
switch (shouldMountComponent) {
case 'locations':
this.setState({
mountComponent: shouldMountComponent,
chosenRetailerId: id
})
break;
case 'products':
this.setState({
mountComponent: shouldMountComponent,
chosenLocationId: id
})
break;
default:
break;
}
}
render() {
const { user } = this.props
const { chosenLocationId, chosenRetailerId, mountComponent } = this.state
return (
<div className="dashboard">
{user.type === 'wholesaler' &&
<div className="wholesaler">
<h1>Wholesaler</h1>
<h3>{user._id}</h3>
{this.state.mountComponent === 'retailers' &&
<Retailers mountComponent={mountComponent} handleClick={this.handleClick} />
}
{this.state.mountComponent === 'locations' &&
<Locations retailerId={chosenRetailerId} locationId={chosenLocationId} mountComponent={mountComponent} handleClick={this.handleClick} />
}
{this.state.mountedComponent === 'products' &&
<Products locationId={chosenLocationId} mountComponent={mountComponent}/>
}
</div>
}
{user.type === 'retailer' &&
<div className="retailers">
<h1>Retailer {user._id}</h1>
<Locations locationId={chosenLocationId}/>
</div>
}
{user.type === 'location' &&
<div className="locations">
<h1>Location {user._id}</h1>
<Products />
</div>
}
<p>You're logged in with React & JWT!!</p>
<p>
<Link to="/login">Logout</Link>
</p>
</div>
)
}
}
function mapStateToProps(state) {
const { authentication } = state
const { user } = authentication
return {
user
}
}
const connectedDashboard = connect(mapStateToProps)(Dashboard)
export { connectedDashboard as Dashboard }
Retailers.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
class Retailers extends Component {
state = {
retailers: []
}
componentDidMount() {
const { user } = this.props
const requestOptions = {
method: 'GET',
headers: { 'Authorization': 'Bearer ' + user.token }
}
fetch(`http://localhost:4000/retailers/by-wholesaler/${user._id}`, requestOptions)
.then(result => result.json())
.then(result => {
this.setState({
retailers: result
})
})
}
render() {
const { retailers } = this.state
return (
<div className="retailers">
{retailers.map((retailer, index) =>
<button key={index} onClick={() => this.props.handleClick(retailer._id, 'locations')}>{retailer.name}</button>
)}
</div>
)
}
}
function mapStateToProps(state) {
const { authentication } = state
const { user } = authentication
return { user }
}
const connectedRetailers = connect(mapStateToProps)(Retailers)
export { connectedRetailers as Retailers }
Locations.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
class Locations extends Component {
state = {
locations: []
}
componentDidMount() {
const { user } = this.props
const requestOptions = {
method: 'GET',
headers: { 'Authorization': 'Bearer ' + user.token }
}
const retailerId = (user.type === 'retailer') ? user._id : this.props.retailerId
console.log(retailerId)
fetch(`http://localhost:4000/locations/by-retailer/${retailerId}`, requestOptions)
.then(result => result.json())
.then(result => {
this.setState({
locations: result
})
})
}
render() {
const { locations } = this.state
return (
<div className="locations">
{locations.map((location, index) =>
<button key={index} onClick={() => this.props.handleClick(location._id, 'products')}>{location.name}</button>
)}
</div>
)
}
}
function mapStateToProps(state) {
const { authentication } = state
const { user } = authentication
return { user }
}
const connectedLocations = connect(mapStateToProps)(Locations)
export { connectedLocations as Locations }

You have to pass handleCLick to location as a prop. You do that in you wholesaler case (passing it to the retailer component), but not when using the Locations component

You didn't pass handleClick as a prop :)
<Retailers handleClick={this.handleClick} />
<Locations handleClick={this.handleClick} />
So prop is undefined and you can't call it as a function.

Check the locations.map function in your Locations.js.
Your are passing a so called thisArg to the map function, so it is no longer using the right context.
This should work:
<div className="locations">
{locations.map((location, index) =>
<button key={index} onClick={() =>
this.props.handleClick(location._id, 'products')}>
{location.name}
</button>
)}
</div>
Also, think about using the uuid package for your iteration keys. Now you are using an index and that will not be unique if you do so in another iteration too (not the case yet so).

Focusing on Input element using ref does not work

Hi everyone I am working on a project which I need to handle focus elements using the arrow keys.
Right now everything is ok and the functionality is working by click.
Unfortunately, when I am using the arrow keys the process work for the tr elements but it is not working for the input elements.
this is the app component:
import React from "react";
import "./App.css";
import RenderRowItem from "./RenderRow";
const keysMapNum={
LEFT:37,
UP:38,
RIGHT:39,
DOWN:40,
ENTER:13,
TAB:9,
CTRL:17
};
class App extends React.Component {
state = {
data: [],
formData: [],
selectedInput:[0,0]
};
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(json => {
const data = json.map(({ id, name, username, email }) => {
return {
id,
name,
username,
email
};
});
const mappedData=[];
data.forEach(item=>{
const rowRef=React.createRef();
const rowData=[];
Object.keys(item).forEach(innerItem=>{
let optimizedData = {
filedName:innerItem,
value:item[innerItem],
hint:false,
ref:React.createRef(),
editable:true,
visible:true,
focused:false
};
rowData.push(optimizedData);
});
const mappedDataItem = {
rowRef,
rowData,
focused:false
};
mappedData.push(mappedDataItem);
});
console.log(mappedData);
this.setState({
data:mappedData
},()=>{
console.log(this.state.data)
});
});
document.addEventListener("keydown",(e)=>{
// e.preventDefault();
const newState={...this.state};
console.log("doc",newState);
let [rowNum,columnNum]=[...newState.selectedInput];
const rowLength=newState.data.length;
const columnLength=newState.data[rowNum]["rowData"].length;
if(e.keyCode===keysMapNum.DOWN){
rowNum++;
if(rowNum>=rowLength){
rowNum=0;
}
newState.selectedInput[0]=rowNum;
this.selectedColumn(rowNum,columnNum);
this.setState({
...newState
},()=>{
this.selectedRow(rowNum,newState.data[rowNum].rowRef);
});
}else if(e.keyCode===keysMapNum.UP){
rowNum--;
if(rowNum<0){
rowNum=rowLength - 1;
}
newState.selectedInput[0]=rowNum;
this.selectedColumn(rowNum,columnNum)
this.setState({
...newState
},()=>{
this.selectedRow(rowNum,newState.data[rowNum].rowRef);
})
}else if(e.keyCode===keysMapNum.LEFT){
}else if(e.keyCode===keysMapNum.RIGHT){
}
this.setState({
...newState
})
});
}
selectedRow=(rowNum,ref)=>{
const newState={...this.state};
newState.data.forEach(item=>{
if(item.rowRef.current!==null){
item.rowRef.current.style.backgroundColor="";
item.rowRef.current.style.color="#333";
}
});
if(ref.current!==null){
ref.current.style.backgroundColor="gray";
ref.current.style.color="white";
}
// if(newState.data[rowNum]["rowData"][0].ref.current!==null){newState.data[rowNum]["rowData"][0].ref.current.focus();
// newState.data[rowNum]["rowData"][0].ref.current.select();}
};
selectedColumn=(rowNum,columnNum)=>{
const newState={...this.state};
let ref=newState.data[rowNum]["rowData"][columnNum].ref;
newState.data[rowNum]["rowData"][columnNum].ref.current.style.backgroundColor="tomato";
if(ref.current!==null){
ref.current.focus();
ref.current.select();
}
};
handleInputClick=(rowNum,columnNum)=>{
const newState={...this.state};
newState.selectedInput=[rowNum,columnNum];
newState.data[rowNum]["focused"]=true;
newState.data[rowNum]["rowData"][columnNum]["focused"]=true;
this.setState({
...newState
},()=>{
this.selectedColumn(rowNum,columnNum);
})
};
setRef=(ref)=> {
this.name = ref;
};
render() {
const { data } = this.state;
// { id, name, username, email }
return (
<div className="App">
<table>
<tbody>
{data.map((datum, rowNum) => {
return (
<tr key={rowNum} ref={datum.rowRef} onClick={()=>this.selectedRow(rowNum,datum.rowRef)}>
{datum.rowData.map((item,columnNum) => (
<RenderRowItem key={Math.random()} ref={item.ref} handleInputClick={this.handleInputClick} rowNum={rowNum} columnNum={columnNum} value={item.value} fieldName={item.filedName}/>
))}
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}
export default App;
and this is the RowItem component:
import React from "react";
const RenderRow=React.forwardRef((props,ref)=>(
<>
<td onClick={()=>props.handleInputClick(props.rowNum,props.columnNum)} >{props.filedName!=="id"?<input type="text" value={props.value} ref={ref} />:props.value}</td>
</>
));
export default RenderRow;
this structure is just testing and I know that need to be optimized.
Please only use up and down arrow keys.
Here is the SandBox link

How to show information from API when using search box in ReactJS?

I'm using the Star Wars API to build a React JS project. The aim of my app is to be able to search for characters.
Here is my code for the search component in the my app.
At the moment I'm able to retrieve data the API and show the information on the page but I can't work out how to show this information when it's searched for.
Any ideas?
import React, { Component } from 'react';
class Search extends Component {
constructor(props){
super(props)
this.state = {
query:'',
peoples: [],
}
}
onChange (e){
this.setState({
query: e.target.value
})
if(this.state.query && this.state.query.length > 1) {
if(this.state.query.length % 2 === 0){
this.componentDidMount()
}
}
}
componentDidMount(){
const url = "https://swapi.co/api/people/";
fetch (url,{
method:'GET'
}).then(results => {
return results.json();
}).then(data => {
let peoples = data.results.map((people) => {
return(
<ul key={people.name}>
<li>{people.name}</li>
</ul>
)
})
this.setState({peoples: peoples});
console.log("state", peoples)
})
}
render() {
return (
<form>
<input
type="text"
className="search-box"
placeholder="Search for..."
onChange={this.onChange.bind(this)}
/>
{this.state.peoples}
</form>
)
}
}
export default Search

You could put your fetch in a separate function instead of in componentDidMount and call that when the component mounts and when your query changes.
Since you might be creating multiple requests if the user types quickly, you could use a debounce to only send one request, or use something that verifies that you always use the result of the latest request, like e.g. a token.
Example
class Search extends Component {
token = null;
state = {
query: "",
people: []
};
onChange = e => {
const { value } = e.target;
this.setState({
query: value
});
this.search(value);
};
search = query => {
const url = `https://swapi.co/api/people?search=${query}`;
const token = {};
this.token = token;
fetch(url)
.then(results => results.json())
.then(data => {
if (this.token === token) {
this.setState({ people: data.results });
}
});
};
componentDidMount() {
this.search("");
}
render() {
return (
<form>
<input
type="text"
className="search-box"
placeholder="Search for..."
onChange={this.onChange}
/>
{this.state.people.map(person => (
<ul key={person.name}>
<li>{person.name}</li>
</ul>
))}
</form>
);
}
}

You have to define it in diff function to manage easy.
import React, { Component } from 'react';
class Search extends Component {
constructor(props) {
super(props)
this.state = {
query: null,
peoples: [],
}
}
componentDidMount() {
this.serachPeople(this.state.query);
}
onChange(e) {
this.setState({ query: e.target.value }, () => {
if (this.state.query && this.state.query.length > 1) {
if (this.state.query.length % 2 === 0) {
this.serachPeople(this.state.query);
}
} else {
this.serachPeople(this.state.query);
}
})
}
serachPeople(query) {
const url = "https://swapi.co/api/people/";
if (query) {
// if get value ion query so filter the data based on the query.
fetch(url, {
method: 'GET'
}).then(results => {
return results.json();
}).then(data => {
let peoples = data.results.filter(people => people.name === query).map((people) => {
return (
<ul key={people.name}>
<li>{people.name}</li>
</ul>
)
})
this.setState({ peoples: peoples });
console.log("state", peoples)
})
} else {
fetch(url, {
method: 'GET'
}).then(results => {
return results.json();
}).then(data => {
let peoples = data.results.map((people) => {
return (
<ul key={people.name}>
<li>{people.name}</li>
</ul>
)
})
this.setState({ peoples: peoples });
console.log("state", peoples)
})
}
}
render() {
return (
<form>
<input
type="text"
className="search-box"
placeholder="Search for..."
onChange={this.onChange.bind(this)}
/>
{this.state.peoples}
</form>
)
}
}
export default Search;
I hope this will help for u. Let me know if u have any query.

Develop Reference

JavaScript is the programming language of the Web.

React component not rendering without an event - javascript

You are not returning the mutated state in your setState method call. Try doing this this.setState((prevState) => { prevState.messages.push({ message: response.result.fulfillment.speech, from: 'bot' }) return prevState; })

Related

React Unmounted Component State Update Error

Why changes from local state don't go into global state?

Why is one of my child components able to get handleClick() but the others are not?

Focusing on Input element using ref does not work

How to show information from API when using search box in ReactJS?

Categories

Resources