score:0
there are a couple of things wrong with your code, i put comments in your code where i changed it:
//put magic strings in constants
const sort_by_id = 'sort_by_id';
const sort_by_name = 'sort_by_name';
class app extends react.component {
state = {
assetsarr: [
{ id: 2, name: 'a' },
{ id: 1, name: 'b' },
],
clickedassets: [
{ id: 2, name: 'a' },
{ id: 1, name: 'b' },
],
};
sortedassets(value) {
//not using magic strings but constants
if (value === sort_by_id) {
//sort mutates the array so will sort copy of assetsarr
let sortbyassetid = [...this.state.assetsarr].sort(
(a, b) => {
//id is a number so can use a.id-b.id
return a.id - b.id;
}
);
this.setstate({
...this.state,
clickedassets: sortbyassetid,
});
} else if (value === sort_by_name) {
//still not mutating state
let sortbyassetname = [...this.state.assetsarr].sort(
(a, b) => {
//name is string, use localecompare
return a.name.localecompare(b.name);
}
);
this.setstate({
...this.state,
clickedassets: sortbyassetname,
});
}
}
render() {
return (
<div>
{/* no reason to use id make select a child of label */}
<label>
sort assets by:
<select
name="sorting"
onchange={(e) =>
//passing e.target.value
this.sortedassets(e.target.value)
}
>
<option value={sort_by_name}>name</option>
<option value={sort_by_id}>id</option>
</select>
</label>
<pre>
{json.stringify(this.state.clickedassets)}
</pre>
</div>
);
}
}
reactdom.render(<app />, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- Sorting assets based on name or id
- Render a React component based on its name
- Any way to render Icon based on text field name using material UI?
- axios: stop automatic sorting of objects based on keys
- How to import and render svg file based on given name from variable in React?
- Sorting array of objects using name propery which contains alphabet and numbers using
- React Material UI Table Name Sorting seems little bit off
- Date time sorting in react table on particular column (column name transaction date)
- How can I display React component based on prop name passed into a container?
- React-table: How to sort table data based on the changed cell value (override the default sorting with cell props.value)?
- How can I dynamically load an image from my assets folder based on props in ReactJS?
- Sorting an array of objects based on the index after mapping through an array
- How to render one array item based on name props in React
- Change the class name based on key on react
- How do I dynamically generate an element with a tag name based on a prop?
- Update a state property based on name
- Map over array of objects and filter based on first name
- Summarise numbers from objects based on country name (react, javascript)
- How to remove or hide empty row based on sorting
- Get items by name from JSON based on user input id react
- Render image based on page name in React Component
- filter data as search based on name from maps in react js
- How to sort a nested object based on key name
- React hook dynamic name based on loop
- How to render components dynamically based on route name with React router
- How do you change the current path name in real time based on textbox value? react router
- can't show caret icon for sorting beside the column name
- Dynamically change the column name based on inputs
- How to change class name based on scroll position?
- Modify pseoduclass to either of two options based on class name
More Query from same tag
- Why is document.getElementById() returning null when there is an element with that Id?
- React useEffect loop
- some of the image not showing up when I use if statement react.js
- How to display nested HTML content with {this.props.children}?
- How to downgrade react-router-dom version to v5.2.0
- Next.js error with npm dependencies that import css
- npm start gives error `webpack-dev-server: not found` even if it is installed
- Dynamically add a prop to Reactjs material ui Select
- Using document.classlist.remove in react
- How do I add a React form data to a Firebase real-time database?
- using React JS components in django teamplates though static files (hybrid model) - what's wrong? (newbie JS/React question)
- React-Router cannot access to the below routes
- Display title with React Helmet
- How to make HTML element available for multiple pages in Nextjs?
- Using Reselect in mapState to add together selector values
- Render JSX Switch Case with onClick event
- Error: Cannot update a component (`AppProvider`) while rendering a different component (`Unknown`)
- how to map object into array of objects for selectsearch in react?
- YUP schema validation for existing input
- Getting " Uncaught TypeError: Cannot read properties of undefined (reading 'Items')"
- Test React component with async function with mockResolvedValue - the promise is not resolved
- REACT - How to add comma separator to integer value in Mui-Datatables
- Path to endpoint isn't permanent (nginx/react)
- Use string from prop to import and display a component
- React router using hash url
- React passing onClick value from one class to another
- Babel config file not working in Lerna monorepo
- When to call function vs function() in react onClick?
- handleActive Function is undefined in my component
- How to update and get Circle new position after dragging using @react-google-maps/api?