Render Object Properties in React

Render Object properties in React

You are rendering an array but you can only return a single block from your react component, wrap your map function within a div

class Information extends Component {
render() {
const otherInformationLoop = otherInformation.map((value, key) => {
return (
<div>
<div className="col-md-4" key={key}>
<div className="dashboard-info">

{Object.keys(value).map((val, k) => {
return (<h4 k={k}>{val}</h4>)
})
}

</div>
</div>
</div>
)
})

return (

<div>{ otherInformationLoop }</div>
);
}
}

React: Render components that are properties of an object

You have invalid values for MenuItem. icon is component not node.

You could change it like this Demo

export interface MenuItem {
id: number
name: string
icon?: React.FC,
path: string,
}

And then

export const MenuItemComponent = ({ item }: MenuItemProps) => {
const { icon: Icon } = item;

return (
<a href={item.path}>
<div>
{Icon && <Icon />}
<div>{item.name}</div>
</div>
</a>
);
};

React render object value where key is variable

To access values using computed property keys you need to use the bracket notation.

<CustomArrayHelper values={formValues.myObj[currentKey]} />

Also, you shouldn't put a dot when accessing properties using bracket notation, that's a syntax error. You can also remove the string template syntax, that's unnecessary.

formValues.myObj[currentKey].length

How to render all unknown properties from array of objects except some in react

Below code should solve your problem:

import React from "react";
import SearchBar from "./SearchBar";

const data = [
{
id: 1,
title: 'fdsfsdfs',
state: 'fsdfsd',
viewed: 503,
answered: 207,
folder: 'fsdfds',
created: '2017-11-28',
validUntil: '2019-04-01',
createdBy: 'user1',
selected: false,
expanded: false
},
{
id: 2,
title: 'Ffdsf',
state: 'Rfsdfdsa',
viewed: 803,
answered: 112,
folder: 'fdsfsd',
created: '2017-11-11',
validUntil: '2018-07-12',
createdBy: 'user2',
selected: false,
expanded: false
},
{
id: 3,
title: 'dsfsdf',
state: 'f',
viewed: 503,
answered: 207,
folder: 'fsdfsd',
created: '2017-11-10',
validUntil: '2019-04-01',
createdBy: 'user3',
selected: false,
expanded: false
},
]

const omittedProps = ["id", "selected", "expanded"];

const App = () => {
return (
<>
{data.map(d => (
Object.keys(d).map(prop => (
!omittedProps.includes(prop) && (
<tr>
<td>{d[prop]}</td>
</tr>
)
))
))}
</>
)
};

export default App;

How to render element in React.js from object map

Your array declaration is wrong. you should use object or array that includes objects. Try this block.

const tabs = {
tab1: {
name: "Tab 1",
renderComponent: () => <Tab1Component />
},
tab2: {
name: "Tab 2",
renderComponent: () => <Tab2Component />
}
};

Also surround your js code with {} like;

const MyComponent= () => {
const activeTab = "tab1";
return <>{tabs[activeTab].renderComponent()}</>;
};
export default MyComponent;

How to render object that pass through props in ReactJS?

this.data is not defined. You can access the data that is set in the state using this.state.data

Please ensure that this.props.location.state.data is not null

class A extends React.Component {
state = {
data: {}
};

componentDidMount() {
// this.data = this.props.location.state.data; => not required.
this.setState({
data: this.props.location.state.data
});
}

render() {
return ( <
div > {
Object.keys(this.state.data).map((key, index) => ( <
p key = {
index
} > value is {
this.state.data[key]
} < /p>
))
}
hello <
/div>
);
}
}

How to render a Object in React?

Data is an object so directly we can't use map on that, so use Object.keys or Object.entries to get the array first, then use map on that to create ui items.

Using Object.keys:

_renderObject(){
return Object.keys(ObjectTest).map(obj, i) => {
return (
<div>
id is: {ObjectTest[obj].id} ;
name is: {ObjectTest[obj].name}
</div>
)
})
}

Using Object.entries:

const ObjectTest = {    1: {        id : 1,        name:'ABC'    },    3: {        id: 3,        name:'DEF'    }}
class App extends React.Component{
_renderObject(){ return Object.entries(ObjectTest).map(([key, value], i) => { return ( <div key={key}> id is: {value.id} ; name is: {value.name} </div> ) }) }
render(){ return( <div> {this._renderObject()} </div> ) }}
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>


Related Topics



Leave a reply



Submit