How to access `this` from inside .map() array in React.js? - javascript

Here is a demo.
I want to access this inside an array. Specifically,
this.props.categoryOpen.toString()
throws an error when used as follows.
https://codesandbox.io/s/23l3p906z
import React, { Component } from "react";
class Child extends Component {
render() {
return (
<div>
{this.props.categoryOpen.toString()}
{this.rows.map(row => (
<div>
{row.cells.map(cell => (
<div key={cell.label}>
{cell.label}: {cell.data}
</div>
))}
</div>
))}
</div>
);
}
rows = [
{
cells: [
{
label: "Cell A",
data: {this.props.categoryOpen.toString()}, // breaks
//data: "Foo" // works
},
{
label: "Cell B",
data: "Bar"
}
]
}
];
}
export default Child;
An arrow function also throws an error.
rows = () => [...
How can I access this?

Remove {} around data. It should work
Updated codesandbox: https://codesandbox.io/s/y0oo2v1xvv

Don't statically define your rows like that, or in the constructor, because they won't update when the input props change. In order to have the component re-render automatically when the props change you need to re-generate the rows in the render function.
So just make a method in your component called getRows (or something) and call that from render. That'll have the side effect of making this properly and normally accessible too.
class Child extends Component {
getRows() {
return [
{
cells: [
{
label: "Cell A",
data: this.props.categoryOpen.toString(),
},
{
label: "Cell B",
data: "Bar"
}
]
}
];
}
render() {
const rows = this.getRows()
return (
<div>
{this.props.categoryOpen.toString()}
{rows.map(row => (
<div>
{row.cells.map(cell => (
<div key={cell.label}>
{cell.label}: {cell.data}
</div>
))}
</div>
))}
</div>
);
}
}
export default Child;
Of course you could just generate rows inline in the render method too, but breaking it out into its own method can help with readability.

Just remove the curly braces
{
label: "Cell A",
data: this.props.categoryOpen.toString(), // remove curly braces
//data: "Foo" // works
}

As pointed by other comments you have a syntax error in the data field definition.
Also I did not know this but apparently you can make reference to the lexical context (which is the current component instance here) in class field definition. Worth noting they are not part of the language yet and I would advise to use the constructor for this, which is equivalent as per the Babel transform.
rows is a field which is defined at construction time, if you want to refer to the current instance you need to use the constructor
class Child extends Component {
constructor () {
this.rows = [
{
cells: [
{
label: "Cell A",
data: this.props.categoryOpen.toString(), // breaks
//data: "Foo" // works
},
{
label: "Cell B",
data: "Bar"
}
]
}
];
}
render() {
return (
<div>
{this.props.categoryOpen.toString()}
{this.rows.map(row => (
<div>
{row.cells.map(cell => (
<div key={cell.label}>
{cell.label}: {cell.data}
</div>
))}
</div>
))}
</div>
);
}
}

wrap variable with ticks like this.
data: `${this.props.categoryOpen.toString()}`,
this
should be fine

Related

React Props doesnt show info properly in the confirmation page

I'm designing a form in React that has a main form builder (Create Job.js) and some form pages (AdditionalInfo.js) and (Confirmation.js). this form had a tag input that allows you to choose tags from a drop-down list provided by an API. the selected items need to be shown later in the confirmation page.
This is my main form builder that has props and functions:(CreateJob.js)
state = {
step:1,
Title:'',
requirements:'',
Location:'',
Benefits:'',
Company:'',
InternalCode:'',
Details:'',
Tags:[],
Address:'',
Department:'',
Salary:''
}
handleDropDown = input => value => {
this.setState({ [input]: value });
}
render () {
const { step } = this.state
const {Title,Benefits,Company,InternalCode,Detailss,Tags,Address,Department,Salary,requirements,Location } = this.state;
const values ={Title,Benefits,Company,InternalCode,Detailss,Tags,Address,Department,Salary,requirements,Location}
return (
<div>
....
<AdditionalInfo
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
handleChangeRaw={this.handleChangeRaw}
handleDropDown={this.handleDropDown}
values={values}
/>
<Confirmation
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
/>
....
and this is my form page which includes the list from API and the drop down using react-select(AdditionalInfo.js):
export class AdditionalInfo extends Component {
state = {
locations:[],
departments: [],
tagsList:[],
}
componentDidMount() {
axios.get('/api/jobs/list-tags',{headers:headers}).then(respo =>{
console.log(respo.data)
this.setState({
tagsList:respo.data.map(Tags=>({label: Tags.name, value: Tags.id}))
})
console.log(this.state.tagsList)
})
}
render() {
const {values, handleDropDown} = this.props
<Select placeholder='Select from pre-created Tags 'onChange={handleDropDown('Tags')} defaultValue={values.Tags} required isMulti options={this.state.tagsList}/>
...
this is the list of tags received from the API:
Object { label: "MongoDB", value: 1 }
​
Object { label: "JavaScript", value: 2 }
​
Object { label: "HTML", value: 3 }
​
Object { label: "CSS", value: 4 }
...
And this is my Confirmation page which needs to show the info received from previous pages (Confirmation.js)
.....
render () {
const {
values: {
Title, Benefits,
Company, InternalCode, Detailss, Department,Tags, Salary,requirements,Location
}} = this.props
<Row> Tags: {Tags.join(", ")}</Row>
....
the problem is that, instead of showing tags on the page like putting the labels next to each other
:JavaScript,
MongoDB,
... it shows this
: [object Object], [object Object], [object Object], [object Object]. sorry for the long code but Im a beginner in JavaScript and I dont know how to handle it so it shows the labels. How can I achieve this?
You are doing great, and you have done right, just simple tweak you need.
If React show anything like [Object Object] it means you are trying to render Javascript Object not a single value because you have got Tags from props which is an Array of objects.
Use it like this, it will work like butter -
import React from 'react';
const Confirmation = () => {
const tags = [ // which you got from props
{ label: "MongoDB", value: 1 },
{ label: "JavaScript", value: 2 },
{ label: "HTML", value: 3 },
{ label: "CSS", value: 4 }
];
return (
<div>
{tags.map(tag => tag.label).join(', ')} {/* map over tags to get the array of tag labels */}
</div>
);
}
export default Confirmation;

Rendering the navigation list from an array based on different label on toggle mode

I have a header component where I need to render three buttons, so every three buttons have three props. One is the class name, click handler and text.
So out of three buttons, two buttons act as a toggle button, so based on the click the text should change.
See the below code:
class App extends Component(){
state = {
navigationList: [{
text: 'Signout',
onClickHandler: this.signoutHandler,
customClassName: 'buttonStyle'
}, {
text: this.state.isStudents ? 'Students' : 'Teachers',
onClickHandler: this.viewMode,
customClassName: 'buttonStyle'
}, {
text: this.state.activeWay ? 'Active On' : 'Active Hidden',
onClickHandler: this.activeWay,
customClassName: 'buttonStyle'
}]
}
signoutHandler = () => {
// some functionality
}
viewMode = () => {
this.setState({
isStudents: !this.state.isStudents
})
}
activeWay = () => {
this.setState({
activeWay: !this.state.activeWay
})
}
render(){
return (
<Header navigationList={this.state.navigationList}/>
)
}
}
const Header = ({navigationList}) => {
return (
<>
{navigationList && navigationList.map(({text, onClickHandler, customClassName}) => {
return(
<button
onClick={onClickHandler}
className={customClassName}
>
{text}
</button>
)
})}
</>
)
}
The other way is I can pass all the props one by one and instead of an array I can write three button elements render it, but I am thinking to have an array and render using a map.
So which method is better, the problem that I am facing is if use the array. map render
the approach I need to set the initial value as a variable outside and how can I set the state.
And I am getting the onClick method is undefined, is it because the function is not attached to the state navigation list array.
Update
I declared the functions above the state so it was able to call the function.
So in JS, before the state is declared in the memory the functions should be hoisted isn't.
class App extends React.Component {
constructor(props){
super();
this.state = {
isStudents:false,
activeWay:false,
}
}
createList(){
return [{
text: 'Signout',
onClickHandler: this.signoutHandler.bind(this),
customClassName: 'buttonStyle'
}, {
text: this.state.isStudents ? 'Students' : 'Teachers',
onClickHandler: this.viewMode.bind(this),
customClassName: 'buttonStyle'
}, {
text: this.state.activeWay ? 'Active On' : 'Active Hidden',
onClickHandler: this.activeWay.bind(this),
customClassName: 'buttonStyle'
}];
}
signoutHandler(){
}
viewMode(){
this.setState({
isStudents: !this.state.isStudents
})
}
activeWay(){
this.setState({
activeWay: !this.state.activeWay
})
}
render(){
return (
<div>
<div>ddd</div>
<Header navigationList={this.createList()} />
</div>
)
}
}
const Header = ({navigationList}) => {
console.log(navigationList);
return (
<div>
{navigationList && navigationList.map(({text, onClickHandler, customClassName}) => {
return(
<button
onClick={onClickHandler}
className={customClassName}
>
{text}
</button>
)
})}
</div>
)
}
ReactDOM.render(<App />, document.querySelector("#app"))
https://jsfiddle.net/luk17/en9h1bpr/
Ok I will try to explain, If you see you are using function expressions in your class and as far as hoisting is concerned in JavaScript, functions expressions are not hoisted in JS only function declarations are hoisted, function expressions are treated as variables in JS.
Now for your case you don't have to shift your functions above the state, you can simply use constructor for initializing state as
constructor(props) {
super(props);
this.state = {
isStudents: false,
activeWay: false,
navigationList: [
{
text: "Signout",
onClickHandler: this.signoutHandler,
customClassName: "buttonStyle"
},
{
text: "Teachers",
onClickHandler: this.viewMode,
customClassName: "buttonStyle"
},
{
text: "Active Hidden",
onClickHandler: this.activeWay,
customClassName: "buttonStyle"
}
]
};
}
Now you will have your handlers available as it is
Sandbox with some modification just to show
EDIT:
You can have default text for buttons and change it when clicking,
Sandbox updated
Hope it helps

React rendering html elements in nested loops

I have a data structure like this {key: [array of object]}. I want to render each element in array of object using nested for loop like this:
for each entry(k, v) in map:
for each element in array v:
display html data
I am using react version 16.
I tried this in JSX:
class Positions extends React.Component {
renderPosition(position) {
var expiry = position["ExpiryDay"] + "-" + position["ExpiryMonth"] + "-" + position["ExpiryYear"];
console.log(expiry);
return (<label>{expiry}</label>);
}
render() {
return (
<div>
{this.props.positionsGrouped.forEach(function(positions) {
return (
<div>
{positions.map(function(position) {
return (
<div>
{this.renderPosition(position)}
</div>
);
}.bind(this))}
</div>
);
}.bind(this))}
</div>
);
}
}
Here is the JS that it compiles to:
class Positions extends React.Component {
renderPosition(position) {
var expiry = position["ExpiryDay"] + "-" + position["ExpiryMonth"] + "-" + position["ExpiryYear"];
console.log(expiry);
return React.createElement(
"label",
null,
expiry
);
}
render() {
return React.createElement(
"div",
null,
this.props.positionsGrouped.forEach(function (positions) {
return React.createElement(
"div",
null,
positions.map(function (position) {
return React.createElement(
"div",
null,
this.renderPosition(position)
);
}.bind(this))
);
}.bind(this))
);
}
}
However I don't see anything being rendered except for the top most div. Here is the rendered html:
<div id="app">
<div></div>
</div>
Here is what I see in react developer tools:
<App>
<Positions>
<div></div>
</Positions>
</App>
I don't see any errors in the console. I expected at least three nested divs to be rendered however I only see one so it sounds like something is wrong at the level of the first for loop. But, I do see my expiry variable being printed to console properly so I know renderPosition is getting called with the correct data.
Does anyone know what I am doing wrong? I'm new to react and sorry for any typos. Thanks in advance.
this.props.positionsGrouped.forEach would return undefined. I mean it wouldn't return anything. So nothing gets rendered.
Just change your component code like this
import React from "react";
class Positions extends React.Component {
constructor(props) {
super(props);
this.renderPosition = this.renderPosition.bind(this);
}
renderPosition(position) {
var expiry = position["name"] + "-" + position["title"];
console.log(expiry);
return <label>{expiry}</label>;
}
render() {
const { positionsGrouped } = this.props;
return (
<div>
{positionsGrouped.map(positions => {
const keys = Object.keys(positions);
return (
<div>
{positions[keys[0]].map(position => {
return <div>{this.renderPosition(position)}</div>;
})}
</div>
);
})}
</div>
);
}
}
export default Positions;
Inside your parent file
import React from "react";
import ReactDOM from "react-dom";
import Position from "./test";
import "./styles.css";
function App() {
var positionGroup = [
{
a: [
{
name: "hello",
title: "sdfd"
},
{
name: "hello",
title: "sdfd"
},
{
name: "hello",
title: "sdfd"
}
]
},
{
b: [
{
name: "hello",
title: "sdfd"
},
{
name: "hello",
title: "sdfd"
},
{
name: "hello",
title: "sdfd"
}
]
}
];
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Position positionsGrouped={positionGroup} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
The return value of forEach is undefined no matter what you return in callback function. use map instead.
class Positions extends React.Component {
getExpiry(position) {
return `${position.ExpiryDay}-${position.ExpiryMonth}-${position.ExpiryYear}`;
}
render() {
return (
<div>
{this.props.positionsGrouped.map(positions => (
<div>
{positions.map((position) => (
<div>
<label>{this.getExpiry(position)}</label>
</div>
))}
</div>
))}
</div>
);
}
}
I changed your code a little to make it more concise.

cannot get the parent property this property when I have two inner loop

I have a complicated scenario which I am really confused how to deal with it.
I have an array as follows:
stories=[
{
"categ": "politics",
"arr": [{
"t": 1
}, {
"t": 2
}, {
"t": 3
}]
},
{
"categ": "Business",
"arr": [{
"t": 1
}, {
"t": 2
}, {
"t": 3
}]
}
]
As you can see this array has another array inside it and depending on what is executed I need to loop through the first array and find the appropriate array inside the first array. So for instance if I want to get the array related to business category I need to loop through the first array and choose the array related to business. To do so I have the following code:
<div className="row">
{
this.props.stories.map((item,i)=> <Story key={i} position={i} story={item} ></Story>)
}
</div>
So you can see that with map I am able to loop through the first array. Now considering that by using this.props.categ I can access the category that I want. so I have to change my code to sth like below:
<div className="row" >
{
this.props.stories.map(function(snippet){
if(snippet.categ==="politics"){
return(
snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>)
);
}
})
}
</div>
But in the above code "politics" is hard coded and should be replaced with this.props.categ. However as soon as I replace that I get the error saying
Uncaught TypeError: Cannot read property 'props' of undefined
which totally make sense since I am loosing the parent this since I do not use es6 fat arrow. Now how can make this work?
You can bind the outer map function like
<div className="row" >
{
this.props.stories.map(function(snippet){
if(snippet.categ===this.props.categ){
return(
{snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>})
);
}
}.bind(this))
}
</div>
This will allow you map function to refer to the outer context where prop is available. Also you forgot to include your inner map function inside {}
Other option is to use the arrow function
<div className="row" >
{
this.props.stories.map(snippet) => {
if(snippet.categ===this.props.categ){
return(
{snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>})
);
}
}.bind(this))
}
</div>
Save the this to that before entering the function.
Then use that.props.categ to refer to the outer this.
If that makes any sense :D
Something like so:
render(){
// place here
// at the top of render function
// but outside the return
var that = this;
return (
{something.map(function(snippet){
if (snippet.categ === that.props.categ){
// do things here
}
})}
);
}

How do I render components within a state in react?

I'm learning react and I'm stuck on how to render the birthdays within my this.state. I figured I would use something like:
{this.state.birthdays}
but that doesn't seem to reach each birthday. My getElementByID is equal to a container which exists on my HTML. Any advice/help would be great!
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
birthdays: {
'January': [{
name: 'Mike',
date: '1/14/90'
}, {
name: 'Joe',
date: '1/7/92'
}],
March: [{
name: 'Mary',
date: '3/7/88'
}]
}
}
}
render() {
return (
<div>
</div>
);
}
}
ReactDOM.render(<App />,
document.getElementById('container'));
Try this:
{ Object.keys(this.state.birthdays).map(this.renderBirthdays) }
And then above your render function create a function called renderBirthdays like this:
renderBirthdays: function(key) {
return (
<div key={key} index={key} details={this.state.birthdays[key]}>
{details.name} - {details.date}
</div>
)
},
render: function() {
return (
<div>{ Object.keys(this.state.birthdays).map(this.renderBirthdays) }</div>
)
}
So you can take advantage of javascripts map which will take your object and key them. Then we're going to pass this key into a function called renderBirthdays which will iterate over the item. We need to pass a key and an index into the element, and for ease of use, we can pass a details prop into it equal to the currently selected item it's iterating over. That way we can just use {details.name} etc in the element.
This is untested, but something like this should work. Loop over the month keys using Object.keys, then reduce each set of birthdays to a flat array:
render() {
return (
<div>
{Object.keys(this.state.birthdays).reduce((birthdays, month) => {
return birthdays.concat(this.state.birthdays[month].map((bday) => {
return (
<p>{bday.name} - {bday.date}</p>
);
}));
}, [])}
</div>
);
}

Categories