React: Calling a function inside a map function

Question

Here's the basic layout of the object I'm using (being passed as a prop to the component):

bigObject {
    overview: {
        *not being used for current concern*
    },
    code: {
        1: {
            textArray: [*array of length 4 to 8*],
            imgSrc: "string goes here"
        },
        2: {
            textArray: [*array of length 4 to 8*],
            imgSrc: "string goes here"
        },
        3: {
            textArray: [*array of length 4 to 8*],
            imgSrc: "string goes here"
        },
    }
}

My constructor:

constructor(props) {
    super(props);
    this.state = {
        projectName: this.props.projectName,
        info: bigObject[this.props.projectName]
    }
    this.renderInfo = this.renderInfo.bind(this);
    this.renderText = this.renderText.bind(this);

    console.log(this.state.info);
}

What I'm trying to do is iterate through the code object so that for each imgSrc, the text array in the object with it is iterated over to create list elements along side the photo.

renderInfo() {
    return Object.keys(this.state.info.code).map(function(key, index) {
        return (
            <div className="code-snippet" id={name + key} key={key}>
                <div className="code-description">
                    <ul>
                        {() => this.renderText(key)}
                    </ul>
                </div>
                <div className="code-img">
                    <img src={"/project-images/MongoScraper/" + placeholder[key].img} alt=""/>
                </div>
            </div>
        )
    });
}

Each img is rendered exactly how I want, but the renderText method isn't iterating through the textArray like I want:

renderText(key) {
    console.log("hello world") //doesn't log
    let placeholder = this.state.info.code;
    return placeholder[key].text.map(function(keyValue, index) {
        return (
            <li>{placeholder[key].text[index]}</li>
        )
    });
}

The render() method:

render() {
    return (
        <div className="container code-descriptor-div">
            {this.renderInfo()}
        </div>
    )
}

I'm using an arrow function when I call the renderText method because of lexical scoping concerns ("cannot read property of undefined" results from not using the arrow function), but I know the method isn't being called at all because the console isn't logging "Hello world".

When I call the renderText method inside of the render() method, it will render the list elements properly, but doing that doesn't work with how I'm structuring other components.

Is there a way to iterate through the textArray like I want?

azium · Accepted Answer · 2017-10-20 17:30:18Z

10

You're not actually calling your function. you're passing a new function.

Change

{() => this.renderText(key)}

to:

{this.renderText(key)}

You're fixing the lexical scoping in the wrong spot. You're still using function for map.

change:

.map(function(key, index) {

to:

.map((key, index) => {

When writing React code, use arrow functions everywhere. It will be a very rare case where you need to use the function keyword.

answered Oct 20, 2017 at 17:30

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Ertel-Moore Over a year ago

This helped a lot. Thank you.

Aditya Singh · Accepted Answer · 2017-10-20 20:03:33Z

0

You cannot return a new statement from inside an async function such as map() which is already inside your main function. You must pass a callback in the parent function. Try something like this:

function foo(callback){
  const bigObject = [{
        textArray: [*array of length 4 to 8*],
        imgSrc: "string goes here"
   }, {
        textArray: [*array of length 4 to 8*],
        imgSrc: "string goes here"
   }];
   if(bigObject.length>0){
      bigObject.map((obj)=>{
        callback(obj);
      });
   }
}

Now you can call all the value from bigObject inside your render method like so:

render(){
  return (
    <div>
      {this.foo(e){ console.log(e.textArray); }}
    </div>
  )
}

answered Oct 20, 2017 at 20:03

Aditya Singh

972 silver badges12 bronze badges

Collectives™ on Stack Overflow

React: Calling a function inside a map function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related