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 thenexport 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
What Do Double Brackets Mean in JavaScript and How to Access Them
Regular Expression | Leap Years and More
Javascript: How to Detect If a Word Is Highlighted
JavaScript - Generating All Combinations of Elements in a Single Array (In Pairs)
How to Detect Browser Window /Tab Close Event
Google Spreadsheet Script - How to Transpose/Rotate Multi-Dimensional Array
Execute an Exe File Using Node.Js
Rails 5: How to Use $(Document).Ready() with Turbo-Links
Why Threre Is No Way to Download File Using Ajax Request
With JavaScript, How to Change the Z Index/Layer of an Svg <G> Element
Why Does a Simple .*? Non-Greedy Regex Greedily Include Additional Characters Before a Match
How Do We Set Remote in Typeahead.Js
Nodejs Timeout a Promise If Failed to Complete in Time
Different Result for Yyyy-Mm-Dd and Yyyy/Mm/Dd in JavaScript When Passed to "New Date"
Why a Variable Defined Global Is Undefined
Click Everywhere But Here Event
Why Do I Need to Await an Async Function When It Is Not Supposedly Returning a Promise