i've got a problem. I'm trying to make data search from API.
The problem is that {people.length === 0 && <p>No data</p>} is not working. When i console.log people.length the length value doesn't change when i'm typing. Where's the problem?
Here's my code:
const PeopleSearch = () => {
const [people, setPeople] = useState([]);
const [search, setSearch] = useState('');
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
const fetchData = async () => {
const response = await axios.get(swapi);
const transformedPeople = response.data.results.sort((a, b) =>
a.name.localeCompare(b.name)
);
setPeople(transformedPeople);
setLoading(false);
};
fetchData();
}, []);
const searchHandler = (event) => {
setSearch(event.target.value);
};
return (
<>
<Input
type="text"
placeholder="Search by name..."
onChange={searchHandler}
/>
<section>
{loading ? (
<Loading />
) : (
<PeopleList
people={people.filter(({ name }) => {
if (name.toLowerCase().includes(search.toLowerCase())) {
return people;
}
})}
/>
)}
{people.length === 0 && <p>No data</p>}
</section>
</>
);
};
You're only calling setPeople once, on mount, with the useEffect(() => { ... }, []) - so people.length will remain the same once the API call completes. You need to use the filtered array both for the PeopleList prop and the No data check.
You should also tweak your filter, since it only cares about whether its return value is truthy or not.
const filteredPeople = people.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()));
return (
<>
<Input
type="text"
placeholder="Search by name..."
onChange={searchHandler}
/>
<section>
{loading ? (
<Loading />
) : (
<PeopleList
people={filteredPeople}
/>
)}
{filteredPeople.length === 0 && !loading && <p>No data</p>}
</section>
</>
);
Related
I am trying to make history by pushing on button click
onclick function of the li is not working
as u can see in the code <SuggestionsList/> is in the last return statement its funtions are rendered in const SuggestionsList = (props) => { . The onclick funtion is comimg inside the const SuggestionsList funtion, this is making the onclick funtion not working
i created the exact working in codesand and its working there without any problem i dont get why its not working in my local
enter link description here
function finddoctor(e) {
console.log(e);
history.push(`/detiled/${e} `);
}
const onChange = (event) => {
const value = event.target.value;
setInputValue(value);
setShowResults(false);
const filteredSuggestions = suggestions.filter(
(suggestion) =>
suggestion.firstname
.toString()
.toLowerCase()
.includes(value.toLowerCase()) ||
suggestion.id.toString().toLowerCase().includes(value.toLowerCase())
);
setFilteredSuggestions(filteredSuggestions);
setDisplaySuggestions(true);
};
const onSelectSuggestion = (index) => {
setSelectedSuggestion(index);
setInputValue(filteredSuggestions[index]);
setFilteredSuggestions([]);
setDisplaySuggestions(false);
};
const SuggestionsList = (props) => {
const {
suggestions,
inputValue,
onSelectSuggestion,
displaySuggestions,
selectedSuggestion,
} = props;
if (inputValue && displaySuggestions) {
if (suggestions.length > 0) {
return (
<ul className="suggestions-list" style={styles.ulstyle}>
{suggestions.map((suggestion, index) => {
const isSelected = selectedSuggestion === index;
const classname = `suggestion ${isSelected ? "selected" : ""}`;
return (
<>
<li
style={styles.listyle}
onClick={finddoctor(suggestion.id)}
key={index}
className={classname}
>
{suggestion.firstname}
</li>
</>
);
})}
</ul>
);
} else {
return <div>No suggestions available...</div>;
}
}
return <></>;
};
useEffect(() => {
axios
.get("admin-panel/all-doctors-list/")
.then((res) => {
const data = res.data;
setShowSerch(data);
});
}, []);
return (
<>
<div className="note-container" style={styles.card}>
<div style={styles.inner}>
<p style={{ textAlign: "left" }}>Search Doctors</p>
<form className="search-form" style={{}}>
{showResults ? (
<FontAwesomeIcon
style={{ marginRight: "-23px" }}
icon={faSearch}
/>
) : null}
<input
onChange={onChange}
value={inputValue}
style={styles.input}
type="Search"
/>
<SuggestionsList
inputValue={inputValue}
selectedSuggestion={selectedSuggestion}
onSelectSuggestion={onSelectSuggestion}
displaySuggestions={displaySuggestions}
suggestions={filteredSuggestions}
/>
</form>
</div>
</div>
</>
);
};
Instead of onClick={finddoctor(suggestion.id)} (Here just function invocation is happening and expected to have the callback method)
should be
onClick={() => finddoctor(suggestion.id)}
I want to create simple application with react js, which should show the users in the display and then when I click on the delete button, it should delete the following item, however I am having some errors.
import React, { useEffect, useState } from 'react'
const App = () => {
const [users, setUsers] = useState([])
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((users) => {
setUsers(users);
})
}, [users]);
const deleteMe = () => {
setUsers(prevState => {
return prevState.filter(e => e.name)
})
}
return (
<>
{users.map((user) => {
return (
<>
<div> {user.name}
<button onClick={deleteMe}> Delete </button>
{/* <button onClick={}> Update </button> */}
</div>
</>
)
})}
</>
)
}
export default App
To remove the user, the callback (onClick) must have enough information to identify the user to be removed.
In this example, you have some options:
Remove by name. Only if the user names are unique:
const deleteMe = (userName) => {
setUsers(prevState => {
return prevState.filter(e => e.name !== userName)
})
}
return (
<>
{users.map((user) => {
return (
<>
<div> {user.name}
<button onClick={() => deleteMe(user.name)}> Delete </button>
{/* <button onClick={}> Update </button> */}
</div>
</>
)
})}
</>
)
Remove by the element itself. Only if the element isn't repeated in the array (the object itself):
const deleteMe = (user) => {
setUsers(prevState => {
return prevState.filter(e => e !== user)
})
}
return (
<>
{users.map((user) => {
return (
<>
<div> {user.name}
<button onClick={() => deleteMe(user)}> Delete </button>
{/* <button onClick={}> Update </button> */}
</div>
</>
)
})}
</>
)
Remove by the array index. Only if the state is an array, usually:
const deleteMe = (userIndex) => {
setUsers(prevState => {
return prevState.filter((e, i) => i !== userIndex)
})
}
return (
<>
{users.map((user, i) => {
return (
<>
<div> {user.name}
<button onClick={() => deleteMe(i)}> Delete </button>
{/* <button onClick={}> Update </button> */}
</div>
</>
)
})}
</>
)
See how a second parameter i was added to the map and filter functions. That is usually ignored, but it may be useful sometimes.
As this method may fail if the array is reordered of an element is added/removed between the render and the callback, I wouldn't recommend it unless there is no other alternative.
Look at the useEffect code. Because you have users as a dependency the effect will pick up any changes to that state. State changes, you make an API call, then update users, the effect gets called again on the next render, you update users in state, users gets updated again... etc.
It sounds like you just need an empty dependency array so that the effect is only called once when the component is rendered.
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((users) => {
setUsers(users);
})
}, []);
try this , element get deleted and not refresh
import React, { useEffect, useState } from 'react';
const Example = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
setUsers(data);
// .then()
// .then(users => {
// setUsers(users);
// });
};
const deleteMe = index => {
setUsers(prevState => {
console.log(prevState);
return prevState.filter((e, i) => i !== index);
});
};
return (
<div>
{users.map((user, i) => {
return (
<div>
{' '}
{user.name}
<button onClick={() => deleteMe(i)}> Delete </button>
{/* <button onClick={}> Update </button> */}
</div>
);
})}
</div>
);
};
export default Example;
I tried to toggle individual item but unfortunately whenever I try to toggle an item the other item gets affected. Here is my code:
const FAQ = () => {
const [open, setOpen] = useState(false);
const [data, setData] = useState(faqData);
return (
<FAQSection>
<FAQTitle>Frequently Asked Questions</FAQTitle>
<Questions>
<QuestionItemDetail>
{data.map((item) => {
const { id, question, answer } = item;
return (
<div key={id}>
<QuestionItem onClick={() => setOpen(!open)}>
<QuestionItemTitle>{question}</QuestionItemTitle>
{open ? <Close /> : <Add />}
</QuestionItem>
<ReadQuestion>
{open && (
<ReadQuestionDetail>
<ReadQuestionDesc>{answer}</ReadQuestionDesc>
</ReadQuestionDetail>
)}
</ReadQuestion>
</div>
);
})}
</QuestionItemDetail>
</Questions>
</FAQSection>
);
};
What might be wrong with this because I ensured the dummy data has a unique ID.
Because you use a boolean to control all open/close. You need to use index/id to control this.
const [open, setOpen] = useState(null);
...
onClick={() => setOpen(preOpen => preOpen === id ? null : id)}
...
{open === id && (<ReadQuestionDetail>...</ReadQuestionDetail>)}
Your open state is used for all of the items in your data array, which is why it affects all of the items when toggled.
I recommend:
putting all of the data item html/jsx inside a new component.
Inside this new component, create an open state like so:
const MyItemComponent = (id, question, answer) => {
const [open, setOpen] = useState(false);
return (
<div key={id}>
<QuestionItem onClick={() => setOpen(!open)}>
<QuestionItemTitle>{question}</QuestionItemTitle>
{open ? <Close /> : <Add />}
</QuestionItem>
<ReadQuestion>
{open && (
<ReadQuestionDetail>
<ReadQuestionDesc>{answer}</ReadQuestionDesc>
</ReadQuestionDetail>
)}
</ReadQuestion>
</div>
);
}
const FAQ = () => {
const [data, setData] = useState(faqData);
return (
<FAQSection>
<FAQTitle>Frequently Asked Questions</FAQTitle>
<Questions>
<QuestionItemDetail>
{data.map((item) => {
const { id, question, answer } = item;
return (
<MyItemComponent id={id} question={question} answer={answer} />
);
})}
</QuestionItemDetail>
</Questions>
</FAQSection>
);
};
This will give you an individual open state for each item.
So basically I have 2 pieces, the sidebar, then the opener. I'm trying to setup a ref that will connect the sidebar to the current opener. The opener is a functional component, and no matter what I do the current value is null. Am I missing something? I'm just trying to resize a component. My goal is to be able to resize the shown sidebar with the opener.
Here's part of the Render function.
render() {
const { selected, isSidebar, selectedType, search, active } = this.state;
const { pending, callback, resource } = this.props;
const pendingLengh = pending ? pending.length : 0;
const callbackLength = callback ? callback.length : 0;
const isResource = !resource || !Object.keys(resource).length;
return (
<div className="newPatientPage mainPage">
{this.renderMetadata()}
<SubTopBar
title="New Patient Processing"
noLeftSide={true}
subStatus={this.getStatus(pendingLengh, callbackLength)}
isBarcode={!isResource}
sideComponent={this.renderSideComponent()}
/>
{
active ?
<SnapshotSideBar
ref={this.sidebarRef}
patientResource={this.props.patientResource}
isShow={isSidebar}
settup={this.state.settup}
isScan={true}
handleCloseSidebar={this.handleCloseSidebar}
/> :
<NewPatientSideBar
ref={this.sidebarRef}
stepProps={this.state.stepProps}
selected={selected}
isShow={isSidebar}
handleCloseSidebar={this.handleCloseSidebar}
/>
}
<SidebarExtension sidebarToggle={this.toggleSidebar} sidebarReference={this.sidebarRef} sidebarState={isSidebar}/>
Here's the SidebarExtension component
const SidebarExtension = ({
sidebarToggle,
sidebarReference,
sidebarState,
...restProps
}) => {
const [xPos, setXPos] = useState(0);
const [width, setWidth] = useState();
const [openerPosition, setOpenerPosition] = useState(50);
const [isOpen, setIsOpen] = useState(false);
const toggleSidebar = () => {
sidebarToggle();
setIsOpen(!isOpen);
};
useEffect(() => {
setIsOpen(sidebarState);
}, [sidebarState])
if ((!isOpen && !sidebarState)) {
return (
<>
<div
className="resizeHandle"
style={{
right: "0Px",
}}
onClick={toggleSidebar}
>
<LeftCharvenSVG />
</div>
</>
);
}
return (
<>
<div
className="resizeHandle active"
onClick={toggleSidebar}
onMouseDown={startResize}
>
<LeftCharvenSVG />
</div>
</>
);
};
export default SidebarExtension;
Here's what the constructor looks like.
Main Constructor
From the docs https://reactjs.org/docs/forwarding-refs.html you need to wrap your functional component in React.forwardRef()
Example
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
In your case that would be:
const SidebarExtension = React.forwardRef(({
sidebarToggle,
sidebarReference,
sidebarState,
...restProps
}, ref) => {
const [xPos, setXPos] = useState(0);
const [width, setWidth] = useState();
const [openerPosition, setOpenerPosition] = useState(50);
const [isOpen, setIsOpen] = useState(false);
const toggleSidebar = () => {
sidebarToggle();
setIsOpen(!isOpen);
};
useEffect(() => {
setIsOpen(sidebarState);
}, [sidebarState])
if ((!isOpen && !sidebarState)) {
return (
<>
<div
className="resizeHandle"
style={{
right: "0Px",
}}
ref={ref}
onClick={toggleSidebar}
>
<LeftCharvenSVG />
</div>
</>
);
}
return (
<>
<div
className="resizeHandle active"
onClick={toggleSidebar}
onMouseDown={startResize}
>
<LeftCharvenSVG />
</div>
</>
);
});
export default SidebarExtension;
There a two components one is <Form /> and other is <LoginForm />.
<LoginForm /> looks like
const LoginForm = () => {
return (
<Form
inputs={[
//some objects here
]}
onSubmit={(data, setError) => {
setError('some error')
}}
/>
);
};
The <Form /> component looks like.
const Form = ({onSumbit, inputs}) => {
const [error, setError] = useState('');
return (
<>
{error ? <div>{error}</div> : null}
{//rendering inputs here}
<button onClick={() => onSubmit('some data which is not relative to problem', setError)}>
</>
)
}
Now when the button is clicked on onSubmit() should run. And it should call setError which should show some error but its not showing any error. Its also not showing any kind of error.
Note: This is only the relevant part of code. Code is actually large. But I am sure that only this part have some basic flaw.
Sometimes you declared onSumbit and sometimes onSubmit, you need to be consistent:
const LoginForm = () => {
return (
<Form
onSubmit={(data, setter) => {
setter('some error');
}}
/>
);
};
const Form = ({ onSubmit, inputs }) => {
const [error, setError] = useState('');
return (
<>
{error ? <div>{error}</div> : null}
<button
onClick={() => {
onSubmit('some data which is not relative to problem', setError);
}}
>
Submit
</button>
</>
);
};
Here is my code. It works fine. Maybe there is some typo in your code.
const Form = ({onSubmit, inputs}) => {
const [error, setError] = useState('');
return (
<>
{error ? <div>{error}</div> : null}
<button onClick={() => onSubmit('some data which is not relative to problem', setError)}>
Hi
</button>
</>
)
}
const LoginForm = () => {
return (
<Form
inputs={[
//some objects here
]}
onSubmit={(data, setError) => {
setError('some error')
}}
/>
);
};
You had typos and syntax errors previously so this couldn't have worked for you anyway.
This seems to do what you meant.
const Form = ({ onSubmit, inputs }) => {
const [error, setError] = useState('');
return (
<>
{error ? <div>{error}</div> : null}
{// rendering inputs here
}
<button onClick={() => onSubmit('data', setError)} />
</>
);
};