We Keep Coding

Reload table data when select menu item is changed

I have this table with select menu:
export interface IActivePairsProps extends StateProps, DispatchProps, RouteComponentProps<{ url: string }> {}
export const ActivePairs = (props: IActivePairsProps) => {
const [paginationState, setPaginationState] = useState(
overridePaginationStateWithQueryParams(getSortState(props.location, ITEMS_PER_PAGE, 'id'), props.location.search)
);
const [exchangeId, setExchangeId] = useState('');
const getAllEntities = () => {
props.getEntities(paginationState.activePage - 1, paginationState.itemsPerPage, `${paginationState.sort},${paginationState.order}`);
props.getExchangesList();
};
const sortEntities = () => {
getAllEntities();
const endURL = `?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}&exchangeId=${exchangeId}`;
if (props.location.search !== endURL) {
props.history.push(`${props.location.pathname}${endURL}`);
}
};
useEffect(() => {
sortEntities();
}, [paginationState.activePage, paginationState.order, paginationState.sort]);
useEffect(() => {
const params = new URLSearchParams(props.location.search);
const page = params.get('page');
const sort = params.get('sort');
if (page && sort) {
const sortSplit = sort.split(',');
setPaginationState({
...paginationState,
activePage: +page,
sort: sortSplit[0],
order: sortSplit[1],
});
}
const exchangeId = params.get('exchangeId');
}, [props.location.search]);
const sort = p => () => {
setPaginationState({
...paginationState,
order: paginationState.order === 'asc' ? 'desc' : 'asc',
sort: p,
});
};
const handlePagination = currentPage =>
setPaginationState({
...paginationState,
activePage: currentPage,
});
const handleSyncList = () => {
sortEntities();
};
const { activePairsList, exchangesList, match, loading, totalItems } = props;
return (
<div>
<div className="table-responsive">
{activePairsList && activePairsList.length > 0 ? (
<Table responsive>
<thead>
<tr>
.....
<select onChange={e => setExchangeId(e.target.value)}>
{exchangesList
? exchangesList.map(otherEntity => (
<option value={otherEntity.exchangeId} key={otherEntity.exchangeId}>
{otherEntity.exchangeLongName} - {otherEntity.exchangeId}
</option>
))
: null}
</select>
.........
</Table>
) : (
!loading && <div className="alert alert-warning">No Active Pairs found</div>
)}
</div>
{props.totalItems ? (
<div className={activePairsList && activePairsList.length > 0 ? '' : 'd-none'}>
<Row className="justify-content-center">
<JhiItemCount page={paginationState.activePage} total={totalItems} itemsPerPage={paginationState.itemsPerPage} />
</Row>
<Row className="justify-content-center">
<JhiPagination
activePage={paginationState.activePage}
onSelect={handlePagination}
maxButtons={5}
itemsPerPage={paginationState.itemsPerPage}
totalItems={props.totalItems}
/>
</Row>
</div>
) : (
''
)}
</div>
);
};
const mapStateToProps = ({ activePairs, exchangesList }: IRootState) => ({
activePairsList: activePairs.entities,
exchangesList: exchangesList.entities,
loading: activePairs.loading,
totalItems: activePairs.totalItems,
});
const mapDispatchToProps = {
getEntities,
getExchangesList,
};
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;
export default connect(mapStateToProps, mapDispatchToProps)(ActivePairs);
How I can reload the table data when I change the select menu item? I would like to reload the data from the table data with the new selected exchageId param.

useEffect(fn, deps);
As we can see in the React documentation, the way we use the effect hook looks like this:
,fn is the effectful function, and deps is an array of values it depends on. Every time the component renders, React checks if all the values in the deps array are still the same. If any of them has changed since the last render, fn is run again.,All right, so far all the examples exhibit the same behavior. The effect simply doesn't run again if the dependency value doesn't change.
So you only need to give the useEffect hook exchageId as deps and the component's loading function as fn, then UseEffect will rerenders your component.

React - how to properly make an API call and pass the result for further filtering?

I use weather API for my application. The idea is to get the data from the API once as an array and pass it down for further processing. My App.js file looks like this:
import { useState, useEffect } from "react";
import Search from "./components/Search";
import axios from "axios";
function App() {
const [countries, setCountries] = useState([]);
useEffect(() => {
axios.get("https://restcountries.eu/rest/v2/all").then((response) => {
setCountries(response.data);
});
}, []);
return (
<div>
<Search countriesList={countries} />
</div>
);
}
export default App;
The Search component includes a text input field, based on which the incoming array would be filtered and dynamically displayed. However, a function responsible for filtering is not invoked.
Here are the contents of the search component:
import { useState } from "react";
import Country from "./Country";
const Search = ({ countriesList }) => {
const [name, setName] = useState("");
console.log(countriesList);
console.log("countries received");
const filterCountries = (singleCountry, nameFilter) => {
console.log("hello");
console.log(singleCountry);
if (singleCountry.name.toLowerCase().includes(nameFilter.toLowerCase())) {
return singleCountry;
}
};
const countryRender = (showButtonCondition, showWeatherCondition) => {
return (
<div>
{countriesList
.filter((country) => filterCountries(country, name))
.map((filteredCountry) => (
<Country
key={filteredCountry.alpha3Code}
showButton={showButtonCondition}
showWeather={showWeatherCondition}
countryId={filteredCountry.alpha3Code}
countryName={filteredCountry.name}
countryCapital={filteredCountry.capital}
countryPopulation={filteredCountry.population}
countryLanguages={filteredCountry.languages}
countryFlag={filteredCountry.flag}
/>
))}
</div>
);
};
const nameChangeHandler = (event) => {
console.log(event.target.value);
setName(event.target.value);
};
return (
<div>
search: <input value={name} onChange={nameChangeHandler} />
<div>
{countriesList.length > 10 || countriesList.length === 0 ? (
<div>Too many countres, specify another filter</div>
) : (
<></>
)}
{countriesList.length === 1 ? countryRender(false, true) : <></>}
{countriesList.length > 1 && countriesList.length < 10 ? (
countryRender(true, false)
) : (
<></>
)}
</div>
</div>
);
};
export default Search;
I guess that the problem is the changing state of name (user input) that causes the whole Search component to re-render and get the full array anew, but how to overcome it? The React.memo() method doesn't seem to be applicable here, as the documentation states clearly that it shouldn't be used for preventing a component from re-rendering.

You are never actually calling countryRender(true, false). It only gets called when countriesList.length > 1 && countriesList.length < 10 but its length is 250.

How to show search result not found message

import React, { useState, useEffect } from 'react'
import axios from 'axios'
function DataApi({ searchTerm }) {
const [users, setUsers] = useState([])
const [loading, setLoading] = useState(false)
const [error, setError] = useState()
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(res => {
setUsers(res.data);
console.log(res.data);
setLoading(true);
})
.catch(error => {
console.log(error);
setError('Error retrieving data');
});
}, []);
return (
<div>
<div>
{
!loading ?
<h1>...Loading</h1>
:
users.length > 0 && users.filter((item) =>
(searchTerm === '') ? item :
(item.title.toLowerCase().includes(searchTerm.toLocaleLowerCase())) ? item :
// <h1>search result not found</h1>
null
).map((item) => {
return (
<ul key={item.id}>
<li>Name: {item.id}</li>
<li>Title: {item.title}</li>
<li>Body: {item.body}</li>
</ul>
)}
)
}
{
error ? <h1>{error}</h1> : null
}
</div>
</div>
)
}
export default DataApi;
I have made a search field in which user can search the name of the person. If user does not get the searched name then there should be a message come that search result not found. I tried to implement it using if-else (ternary operator) & put the message into else part but it is not working. When I put null instead of search result not found then it works perfectly but I am not able to show the message then. But if I put search result not found instead of null then nothing works, not even filter functionality. Can you guys please help me? Thank you in advancve.

You can simply check the length of user and move the filter method to the useEffect and show a message
import React, { useState, useEffect } from "react";
import axios from "axios";
function DataApi({ searchTerm }) {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const [searchTermTest, setsearchTermTest] = useState();
function handleChange(event) {
setsearchTermTest(event.target.value);
}
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then((res) => {
const data = res.data;
const filteredData = data.filter((dat) =>
dat.title.includes(searchTermTest === undefined ? "" : searchTermTest)
);
setUsers(filteredData);
setLoading(true);
})
.catch((error) => {
console.log("errr", error);
setError("Error retrieving data");
});
}, [searchTermTest]);
return (
<div>
<input type="text" onChange={handleChange} />
<div>
{!loading ? (
<h1>...Loading</h1>
) : (
users.length > 0 &&
users.map((item) => {
return (
<ul key={item.id}>
<li>Name: {item.id}</li>
<li>Title: {item.title}</li>
<li>Body: {item.body}</li>
</ul>
);
})
)}
{users.length === 0 && loading ? <h1>search result not found</h1> : ""}
{error ? <h1>{error}</h1> : null}
</div>
</div>
);
}
export default DataApi;
{users.length === 0 && loading ? <h1>search result not found</h1> : ""}
I have made it in codesandbox
Codesandbox link here

In Array.filter() method you need to return true/false value, that's how it works.
Modified the code and added the renderUser function to take care of user data filter.
DataApi function
function DataApi({ searchTerm }) {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const [searchTermTest, setsearchTermTest] = useState();
function handleChange(event) {
setsearchTermTest(event.target.value);
}
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then((res) => {
const data = res.data;
const filteredData = data.filter((dat) =>
dat.title.includes(searchTermTest === undefined ? "" : searchTermTest)
);
setUsers(filteredData);
setLoading(true);
})
.catch((error) => {
console.log("errr", error);
setError("Error retrieving data");
});
}, [searchTermTest]);
return (
<div>
<input type="text" onChange={handleChange} />
<div>
{!loading ? (
<h1>...Loading</h1>
) : (
users.length > 0 && renderUsers(users, searchTerm) // updated here...
)}
{error ? <h1>{error}</h1> : null}
</div>
</div>
);
}
renderUsers function
const renderUsers = (users, searchTerm) => {
const filteredUsers = users.filter((item) => {
console.log(item.title);
return searchTerm === ""
? true
: item.title.toLowerCase().includes(searchTerm.toLocaleLowerCase())
? true
: false;
});
return filteredUsers.length > 0 ? (
filteredUsers.map((item) => {
return (
<ul key={item.id}>
<li>Name: {item.id}</li>
<li>Title: {item.title}</li>
<li>Body: {item.body}</li>
</ul>
);
})
) : (
<h1>search result not found</h1>
);
};
export default DataApi;

Using boolean operators with ternary operators in javascript

NB: Someone please explain how to format my code here, it just doesn't work, Im doing it wrong or something.
Here is my code after refactoring according to comments, it now works!
import React, { useState, useEffect } from 'react'
import axios from 'axios'
const App = () => {
const [countries, setCountries] = useState([])
useEffect(() => {
console.log('effect');
axios
.get('https://restcountries.eu/rest/v2/all')
.then(response => {
console.log('promise fulfilled');
const countries = response.data
setCountries(countries)
})
}, [])
const [searchVal, setSearchVal] = useState('')
const searchOnChangeEventHandler = (event) => setSearchVal(event.target.value)
const filteredCountries = (searchVal, countries) => countries.filter(country => country.name.toLowerCase().includes(searchVal.toLowerCase()))
const filteredCountriesLength = filteredCountries(searchVal, countries).length
return (
<div>
<h1>coutries data</h1>
<div>
<input
type='text'
placeholder='search countries'
value={searchVal}
onChange={searchOnChangeEventHandler}
>
</input>
</div>
<div>
<>
{
countries.length
? (searchVal
? (
filteredCountriesLength <= 10 && filteredCountriesLength > 1
? filteredCountries(searchVal, countries).map(country => <p key={country.name}>{country.name}</p>)
: <span>{filteredCountriesLength} matches! too many matches, specify another filter...</span>
)
: <span>type to search..</span>)
: <span>populating countries data...</span>
}
</>
</div>
</div >
)
}
export default App
The following piece now works the way I wanted it to, after I cleaned up the code, I think its better to use if-else and then convert to ternary as suggested.
<div>
<>
{
countries.length
? (searchVal
? (
filteredCountriesLength <= 10 && filteredCountriesLength > 1
? filteredCountries(searchVal, countries).map(country => <p key={country.name}>{country.name}</p>)
: <span>{filteredCountriesLength} matches! too many matches, specify another filter...</span>
)
: <span>type to search..</span>)
: <span>populating countries data...</span>
}
</>
</div>
NB: Is there a way to strip all this white-space in the code?
I wanted to print type to search whenever the searchVal input was empty.

I'm not completely sure about what you're asking for but I think it would help you by moving the ternaries into a function like:
const handleRender = () => {
const length = filteredCountries(searchVal, countries)?.length
if (length) {
if (length <= 10) {
return filteredCountries(searchVal, countries).map(country => <p key={country.name}>{country.name}</p>)
} else {
return <span>please be more specific, add filter...</span>
}
}
return <span>populating countries data...</span>
}
// render
{handleRender()}

Can I retrieve a attribute value from a parent element in ReactJS?

When I click on a specific button I want to capture the {country} prop associated with it.
I tired the following
import React, { useState, useEffect } from 'react'
import axios from 'axios'
// ====================================================================[SEARCH-BAR]=======================================================
// search component
const SearchBar = (props) => {
// console.log(props);
const { searchString, searchOnChangeEventHandler } = props
return (
<>
<form>
<label>Search </label>
<input type='text' placeholder='type to search...' value={searchString} onChange={searchOnChangeEventHandler} />
</form>
</>
)
}
// ================================================================[COUNTRY_CARD]==========================================================
// countryCard component
const CountryCard = (props) => {
console.log(props);
return (
<div>
<p>countryName</p>
<p>capital</p>
<p>population</p>
<p>languages</p>
<ul>
<li>item</li>
<li>item</li>
</ul>
<p>image flag</p>
</div>
)
}
// ===================================================================[DISPLAY]===========================================================
// display component
const Display = (props) => {
const [showCountryCard, setShowCountryCard] = useState(false)
const [thisCountry, setThisCountry] = useState({})
// console.log(props);
const { countries, searchString } = props
// console.log(countries);
// eslint-disable-next-line eqeqeq
// searchString empty
if (searchString == false) {
return (
<>
<div>
<span>Type in SearchBar for a country...</span>
</div>
</>
)
}
// to count number of matches
const filteredResultsCount = countries.filter(country => country.name.toLowerCase().includes(searchString.toLowerCase())).length
// function to filterCountries
const filteredResults = (searchString, countries) => countries.filter(country => {
return country.name.toLowerCase().includes(searchString.toLowerCase())
})
// RENDER CONDITIONS
// searchString return <= 10 matches && >1 match
// event handler for show-btn
const showCardEventHandler = (event) => {
console.log(event.target.parentElement);
setShowCountryCard(!showCountryCard)
}
if (filteredResultsCount <= 10 && filteredResultsCount > 1) {
return (
<>
<ul>
{
filteredResults(searchString, countries).map(country =>
<li
key={country.numericCode}
country={country}
>
<span>{country.name}</span>
<button
value={showCountryCard}
onClick={showCardEventHandler}
>show</button>
</li>
)
}
</ul>
{
showCountryCard ? <p>show country card</p> : null
}
</>
)
}
// searchString returns >10 matches
if (filteredResultsCount > 10) {
return (
<span>{filteredResultsCount} matches!, please refine your search...</span>
)
}
// searchString returns ===1 match
if (filteredResultsCount === 1) {
return (
<>
{
filteredResults(searchString, countries).map(country => <CountryCard key={country.numericCode} country={country} />)
}
</>
)
}
// invalid searchString
if (filteredResultsCount === 0) {
return (
<span><strong>{filteredResultsCount} matches!</strong> please refine your search...</span>
)
}
}
// ===================================================================[APP]==============================================================
// app component
const App = () => {
// to store countries
const [countries, setCountries] = useState([])
// to fetch data from
const url = 'https://restcountries.eu/rest/v2/all'
useEffect(() => {
// console.log('effect');
axios
.get(url)
.then(response => {
// console.log('promise fulfilled');
const countries = response.data
// array of objects
setCountries(countries)
})
}, [])
// console.log('countries', countries.length);
// console.log(countries);
// to store search string
const [searchString, setSearchString] = useState('')
// event handler search input
const searchOnChangeEventHandler = (event) => setSearchString(event.target.value)
return (
<>
<h1>Countries Data</h1>
<SearchBar searchString={searchString} searchOnChangeEventHandler={searchOnChangeEventHandler} />
<br />
<Display countries={countries} searchString={searchString} />
</>
)
}
export default App
Please take a look at <Display/> component and in particular I'm trying to work on this part
const showCardEventHandler = (event) => {
console.log(event.target.parentElement);
setShowCountryCard(!showCountryCard)
}
if (filteredResultsCount <= 10 && filteredResultsCount > 1) {
return (
<>
<ul>
{
filteredResults(searchString, countries).map(country =>
<li
key={country.numericCode}
country={country}
>
<span>{country.name}</span>
<button
value={showCountryCard}
onClick={showCardEventHandler}
>show</button>
</li>
)
}
</ul>
{
showCountryCard ? <p>show country card</p> : null
}
</>
)
}
I want to be able to render a list of countries if they are more than 10 and allow a user to click on a specific country, which then will be used to render the <CountryCard/> component.
If there is only 1 matching value from search then I will directly display the country card component. The second functionality works.
After the following refactor the first functionality works, but Ima little confused as to why so I'm adding on to the post. This is the component being rendered and now I'm passing country prop onClick, like so
if (filteredResultsCount <= 10 && filteredResultsCount > 1) {
return (
<>
<ul>
{filteredResults(searchString, countries).map((country) => (
<li key={country.numericCode} country={country}>
<span>{country.name}</span>
<button
value={showCountryCard}
onClick={() => toggleCardEventHandler(country)}>
{showCountryCard ? 'hide' : 'show'}
</button>
</li>
))}
</ul>
{showCountryCard ? <CountryCard country={country} /> : null}
</>
);
}
The event handler is as follows
const toggleCardEventHandler = (country) => {
// console.log(country);
setShowCountryCard(!showCountryCard);
setCountry(country)
};
This works properly.
My question is, when I change the eventHandler onClick={toggleCardEventHandler(country)} it breaks, but shouldnt it be accessible through closure?
Also, if I change the code to this
onClick={() => {
toggleCardEventHandler()
setCountry(country)
}}
The code works the way I want but which is a better way to pass the value to the toggleCardEventHandler() and set the country there or to do it like this?

As I understand it you want to pass the country.name to your showCardEventHandler.
Update showCardEventHandler so it takes the event and the country name:
const showCardEventHandler = (event, countryName) => {
console.log(countryName);
setShowCountryCard(!showCountryCard)
}
Now pass the countryname to the function:
<li
key={country.numericCode}
country={country}
>
<span>{country.name}</span>
<button
value={showCountryCard}
onClick={e => showCardEventHandler(e, country.name)}
>show</button>
</li>
Since you are not using the event in showCardEventHandler you can remove it from the signature
const showCardEventHandler = (countryName) => {}
and call it with onClick={() => showCardEventHandler(country.name)}