I have a profile object in the state of my react app, which contains an array of 6 objects.
I want to be able to render these objects separately.
{
this.state.profiles.map(profile => (
<div key={profile.mainCompanyID}>
{profile.name}
{profile.description}
</div>
))
}
The code above will display all 6 names/descriptions. But I want the power to be able to only map through one of the objects in the array, not all of them.
Any ideas?
filter the array before map
renderBasedOnId = id =>{
const { profiles } = this.state
return profiles.filter(x => x.id === id).map(item => <div>{item.name}</div>)
}
render(){
return this.renderBasedOnId(this.state.selectedId) //just an example of usage
}
You can filter out the data and then apply map.
Working Example - https://codesandbox.io/s/funny-shirley-q9s9j
Code -
function App() {
const profileData = [
{ id: 1, name: "Tom" },
{ id: 2, name: "Dick" },
{ id: 3, name: "Harry" },
{ id: 4, name: "Nuts" }
];
const selectedProfile = profileData.filter(x => x.name === "Harry");
return (
<div className="App">
<h1>Test Filter and map in jsx</h1>
{selectedProfile.map(x => (
<li>
{x.id} - {x.name}
</li>
))}
</div>
);
}
okay you can do it this way
{
this.state.profiles.map(profile => {
if (profile.mainCompanyID === id) { // id you want to match to
return (
<div key={profile.mainCompanyID}>
{profile.name}
{profile.description}
</div>)
} else {
return null
}
})
}
Hope it helps
{ this.state.profiles.map((profile, key) => {
(key===0)
?
return(
<div key={profile.key}>
<p>Name:{profile.name}</p>
<p>Description:{profile.description}</p>
</div>
)
:
return null;
})
}
Related
im trying to develop component that will sort new items, depending if item parent is or is not present on the list already. Components can be nested in each other to unlimited depth. Parent have list of children, children have parentId. Now, it works as expected at the first render, but when new item appear on the list (its added by user, using form, up in the structure), it does in fact make its way to components list, but is not shown on the screen until page reload. I can see temporary list that is used to make all calculations have the item as expected in the nested structure. Then i set state list to value of temp, but its not working, and i dont know why. Im quite new to react stuff. In act of desperation i even tried to destructure root parent of the item, hoping it will force rerender, but that didnt worked too. Anybody could help with this?
http://jsfiddle.net/zkfj03um/13/
import React, { useState } from 'react';
function Component(props) {
const [component, setComponent] = useState(props.component);
return (
<div>
{component.id};
{component.name};
<ul>
{component.subcomps && component.subcomps.map((comp) =>
<li key={comp.id} style={{ textAlign: 'left' }}>
<Component component={comp}
id={comp.id}
name={comp.name}
parentId={comp.parentId}
subcomps={comp.subcomps}
/>
</li>)}
</ul>
</div>
);
}
function ComponentsList(props) {
const newComponents = props.newComponents;
const [filteredComponents, setFilteredComponents] = useState();
function deepSearch(collection, key, value, path=[]) {
for (const o of collection) {
for (const [k, v] of Object.entries(o)) {
if (k === key && v === value) {
return {path: path.concat(o), object: o};
}
if (Array.isArray(v)) {
const _o = deepSearch(v, key, value, path.concat(o));
if (_o) {
return _o;
}
}
}
}
}
async function filter() {
let temp = [];
await newComponents.forEach((comp) => {
//parent may be, or may not be on the list. Its not necesary
const parentTuple = deepSearch(filteredComponents, 'id', comp.parentId);
if (!parentTuple) {
//create parent substitute logic
} else {
const parent = parentTuple.object;
const root = parentTuple.path[0];
const mutReplies = [comm, ...parent.replies];
parent.replies = mutReplies;
temp = [{...root}, ...temp]
}
})
setFilteredComponents([...temp])
}
useEffect(() => {
setLoading(false);
}, [filteredComponents]);
useEffect(() => {
setLoading(true);
filter();
}, [newComponents]);
return (<>
{!loading && filteredComponents.map((component, index) =>
<li key={index}>
<Component component={component} />
</li>
)}
</>);
}
const items = [
{ id: 1, name: 'sample1', subcomps: [{ id: 5, name: 'subcomp1', parentId: 1, subcomps: [] }] },
{
id: 2, name: 'sample2', subcomps: [
{ id: 6, name: 'subcomp2', subcomps: [], parentId: 2 },
{ id: 7, name: 'subcomp3', subcomps: [], parentId: 2 }
]
},
]
ReactDOM.render(<ComponentsList newComponents={items} />, document.querySelector("#app"))
I have following part of React code:
This is handler for adding new object item to the array.
So I am checking if object exist in whole array of objects. If yes I want to increase quantity of this object by 1. Else I want to add object and set quantity to 1.
I am getting error when I want to add 2nd same product (same id)
Uncaught TypeError: Cannot assign to read only property 'quantity' of object '#<Object>'
export const Component = ({ book }: { book: Book }) => {
const [basket, setBasket] = useRecoilState(Basket);
const handleAddBookToBasket = () => {
const find = basket.findIndex((product: any) => product.id === book.id)
if (find !== -1) {
setBasket((basket: any) => [...basket, basket[find].quantity = basket[find].quantity + 1])
} else {
setBasket((basket: any) => [...basket, { ...book, quantity: 1 }])
}
}
EDIT:
if (find !== -1) {
setBasket((basket: any) =>
basket.map((product: any) => ({
...product,
quantity: product.quantity + 1,
}))
);
} else {
setBasket((basket: any) => [...basket, { ...book, quantity: 1 }]);
}
data structures
I'd say the root of your "problem" is that you chose the wrong data structure for your basket. Using Array<Item> means each time you need to update a specific item, you have to perform O(n) linear search.
If you change the basket to { [ItemId]: Item } you can perform instant O(1) updates. See this complete example below. Click on some products to add them to your basket. Check the updated basket quantity in the output.
function App({ products = [] }) {
const [basket, setBasket] = React.useState({})
function addToBasket(product) {
return event => setBasket({
...basket,
[product.id]: {
...product,
quantity: basket[product.id] == null
? 1
: basket[product.id].quantity + 1
}
})
}
return <div>
{products.map((p, key) =>
<button key={key} onClick={addToBasket(p)} children={p.name} />
)}
<pre>{JSON.stringify(basket, null, 2)}</pre>
</div>
}
const products = [
{ id: 1, name: "ginger" },
{ id: 2, name: "garlic" },
{ id: 3, name: "turmeric" }
]
ReactDOM.render(<App products={products}/>, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
object update
As a good practice, you can make a function for immutable object updates.
// Obj.js
const update = (o, key, func) =>
({ ...o, [key]: func(o[key]) })
export { update }
Then import it where this behavior is needed. Notice it's possible to use on nested object updates as well.
// App.js
import * as Obj from "./Obj"
function App({ products = [] }) {
// ...
function addToBasket(product) {
return event => setBasket(
Obj.update(basket, product.id, (p = product) => // ✅
Obj.update(p, "quantity", (n = 0) => n + 1) // ✅
)
)
}
// ...
}
object remove
You can use a similar technique to remove an item from the basket. Instead of coupling the behavior directly in the component that needs removal, add it to the Obj module.
// Obj.js
const update = (o, key, func) =>
({ ...o, [key]: func(o[key]) })
const remove: (o, key) => { // ✅
const r = { ...o }
delete r[key]
return r
}
export { update, remove } // ✅
Now you can import the remove behaviour in any component that needs it.
function App() {
const [basket, setBasket] = React.useState({
1: { id: 1, name: "ginger", quantity: 5 },
2: { id: 2, name: "garlic", quantity: 6 },
3: { id: 3, name: "tumeric", quantity: 7 },
})
function removeFromBasket(product) {
return event => {
setBasket(
Obj.remove(basket, product.id) // ✅
)
}
}
return <div>
{Object.values(basket).map((p, key) =>
<div key={key}>
{p.name} ({p.quantity})
<button onClick={removeFromBasket(p)} children="❌" />
</div>
)}
<pre>{JSON.stringify(basket, null, 2)}</pre>
</div>
}
// inline module for demo
const Obj = {
remove: (o, key) => {
const r = {...o}
delete r[key]
return r
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
In your setBasket your should create a new object instead of updating current one
your code should look like these one :
{...basket, ...{
quantity : basket.quantity + 1
}}
I have a json that looks like below
const assessmentData = [
{
"Sit1": [
{
"rule": "Rule1",
"type": "High"
}
]
},
{
"Sit2": [
{
"rule": "Rule6",
"type": "Low"
}
]
},
{
"Sit3": [
{
"rule": "Rule3",
"type": "High"
}
]
}
]
Now I want to render some html that contains the above info. Usually in vanilla HTML, this is what I do
let content = ""
for(let i=0; i < assessmentData.length; i++) {
for (const [key, value] of Object.entries(assessmentData[i])) {
content += `<h2>${key}<h2>`
for (const [subkey, subvalue] of Object.entries(value)) {
const rule = subvalue["rule"]
content += `<h3>${rule}</h3>`
}
}
}
So the final output looks like
<h2>Sit1<h2><h3>Rule1</h3><h2>Sit2<h2><h3>Rule1</h3><h2>Sit3<h2><h3>Rule1</h3>
But I can't do the same thing using map functionality. So my code in react looks like
const CreateTemplate = (assessmentData) => {
const content = assessmentData.map((item, idx) => {
Object.keys(item).map((subitem, subindex) => {
<h2>{subitem}</h2>
Object.keys(item[subitem]).map((subitem2, subindex2) => {
<h3>{item[subitem][subitem2]["rule"]}</h3>
})
})
});
return (
<div>Content</div>
{content}
)
}
export default CreateTemplate
It doesn't output the content part. What am I doing wrong?
You should return the values from the map callback. * You can also use Object.entries to map an array of the key-value pairs. Since the value is already an array you don't need to use the keys, A.K.A. the array indices, you can simply map the array values.
const content = assessmentData.map((item, idx) => {
return Object.entries(item).map(([key, value], subindex) => {
return (
<React.Fragment key={subindex}>
<h2>{key}</h2>
{value.map((subitem2, subindex2) => {
return <h3 key={subindex2}>{subitem2.rule}</h3>
})}
</React.Fragment>
);
});
});
* I tried matching all the brackets but hopefully your IDE does a better job than I did in a plain text editor
Or using the implicit arrow function returns:
const content = assessmentData.map((item, idx) =>
Object.entries(item).map(([key, value], subindex) => (
<React.Fragment key={subindex}>
<h2>{key}</h2>
{value.map((subitem2, subindex2) => (
<h3 key={subindex2}>{subitem2.rule}</h3>
))}
</React.Fragment>
))
);
Also, as a solution for general question, you can propose a recursive traversal of an object or an array with variant depth, perhaps it will be useful to someone.
window.Fragment = React.Fragment
const assessmentData = [
{
"Sit1": [
{
"rule": "Rule1",
"type": "High"
}
]
},
{
"Sit2": [
{
"rule": "Rule6",
"type": "Low"
}
]
},
{
"another example:" : [
{items: [1, 2]}, {other: [4, 5, 6]}
]
}
]
const getObject = (obj, level) => {
return Object.entries(obj).map(([key, val], i) => {
return <Fragment key={`key${i}`}>{getTree(key, level + 1)}{getTree(val, level + 2)}</Fragment>
})
}
const getArray = (arr, level) => {
return arr.map((e, i) => {
return <Fragment key={`key${i}`}>{getTree(e, level + 1)}</Fragment>
})
}
const getTree = (data, level=0) => {
if (data instanceof Array) {
return getArray(data, level)
} else if (data instanceof Object) {
return getObject(data, level)
}
return <p style={{fontSize:`${20 - level}px`, paddingLeft: `${level}em`}}>{data}</p>
}
const App = () => {
return (
<div>
{ getTree(assessmentData) }
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
* {
margin: 0;
padding: 0;
}
<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>
suppose i am having an array of like
[
{ id: 1, name: "John" , selected: true}
{ id: 2, name: "Jim" , selected: false }
{ id: 3, name: "James" , selected: false }
]
I am having function which get id and on the basis of that id I want to change the selected property of object to true and other selected property object to false
here is my function what i have tried but its throwing error
const handleOnClick = (id) => {
const temps = state.findIndex((sub) => sub.id === id)
setState(prevState => ({
...prevState,
[prevState[temps].selected]: !prevState[temps].selected
}))
Use a .map() to iterate everything. You shouldn't change values within the array without recreating the tree down to the changed object. See below example.
Below you will:
map over every element
Spread their current values
Overwrite the selected depending on if the id is the newly "selected" id
I also supplied an additional function to update using the index of the item in the array instead of by id since your title is "how to update object using index in react state?", although your question also mentions changing by id. I would say go by id if you have the choice, array indices can change.
const App = () => {
const [state, setState] = React.useState([
{ id: 1, name: "John" , selected: true},
{ id: 2, name: "Jim" , selected: false },
{ id: 3, name: "James" , selected: false }
]);
// This takes the ID of the item
const handleOnClick = (id) => {
const newState = state.map(item => {
return {
...item,
selected: item.id === id
};
});
setState(newState);
};
// This takes the index of the item in the array
const handleOnClickByIndex = (indexToSelect) => {
const newState = state.map((item, idx) => {
return {
...item,
selected: indexToSelect === idx
};
});
setState(newState);
};
return (
<div>
{state.map((item, mapIndex) => (
<div key={item.id}>
<div>
<span>{item.name} is selected: {item.selected ? "yes" : "no"}</span>
{/* This will update by ID*/}
<button onClick={() => handleOnClick(item.id)}>Select using ID</button>
{/* This will update by the index of the array (supplied by map) */}
<button onClick={() => handleOnClickByIndex(mapIndex)}>Select using index</button>
</div>
</div>
))}
</div>
);
};
ReactDOM.render(
<App/>,
document.getElementById("app")
);
<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="app"></div>
I found the solution I wanted and it works, see below.....
I know I am doing something stupid but I am having a mental block this morning and would appreciate some help. I am trying to construct html from a mapping:
In my render:
< ul>
{ arryItems.map(this.foo.bind(this)) }
< /ul>
Calling function:
foo(arry, i) {
let result = '';
if (arry.children != undefined && arry.children.length > 0) {
result= (
<div key= {i}>{arry.name}
{arry.children.map(function(child, ix){
<p key= {ix}>{child.name}</p>
})}
</div>
)
} else {
result = (<div>{arry.name}</div>)
}
return result;
};
I am trying to return back html.
While I am receiving no error, the < p>{child.name}< /p> is not in the return html result.
Can anyone point out what is so blatantly obvious with my thinking that I cannot figure this out?
So you want to render a component to an html string? React does this with renderToString. e.g:
var Task = React.createClass({
render() {
return (
<li>{this.props.task.text}</li>
);
}
});
var Tasks = React.createClass({
getTasks() {
return [
{ _id: 1, text: 'This is task 1' },
{ _id: 2, text: 'This is task 2' },
{ _id: 3, text: 'This is task 3' }
];
},
renderTasks() {
return this.getTasks().map(task => {
return <Task key={task._id} task={task} />;
});
},
render() {
return (
<ul>
{this.renderTasks()}
</ul>
);
}
});
var html = ReactDOMServer.renderToString(Tasks);
Note that since 0.14 this method has been split out to react-dom/server package, earlier versions it's just in the react package.
I appreciate Dominic's help but I like my solution better, as it is compact and it checks if there are no children:
foo(arry, index) {
let children = this.getChildren(arry)
return (
<div key={index}>{arry.name}
{ children }
</div>
)
}
getChildren(arry){
let result = [];
if(arry.children != undefined && arry.children.length > 0){
arry.children.map(function(child, ix){
result.push(<p key={ix}>{child.name}</p>)
})
}
return result;
}
render() {
return (
<section>
{ arryItems.map(this.foo.bind(this)) }
</section>
);
}