using 'this' when calling a function inside a map

Question

im new to react and have an issue i cant figure out

i have an external object with data, and if the info delivered is an array instead of just one string/value i want to render it as a <ul> with the different array positions as <li>.

how can i add the current html element as 2nd parameter to the function?

because right now i cant add "this" as a parameter to pass back the info into the according table cell

Line 15 is the line that delivers an unexpected result...

import React from "react"
import games from "../../assets/games"
import './style.scss';

function SingleGame(props) {

function checkContent(content, tdcell) {

        let listcontent = "<ul>";
        for (let i = 0; i < content.length; i++) {
            listcontent += "<li>" + content[i] + "</li>"
        }
        listcontent += "</ul>"

        tdcell.innerHTML = listcontent;
  
}

return (
    <div className="singlegame" id={games[props.game].name}>
            <div className="singlegame--title">
                {games[props.game].name}
            </div>
            <div className="singlegame--imagecontainer">
                <img
                    className="singlegame--imagecontainer-image"
                    src={games[props.game].image}
                    alt={games[props.game].name}
                />
            </div>
            <table className="singlegame--table">
                <tbody>
                    {Object.keys(games[props.game].details).map(detail => (
                        <tr key={detail}>
                            <th><strong>{detail}</strong></th>
                            <td>{checkContent(games[props.game].details[detail], this)}</td>
                        </tr>                        
                    ))}
                </tbody>
            </table>
    </div>
)
}

export default SingleGame

Alex Wayne · Accepted Answer · 2021-09-29 05:37:43Z

1

In react you don't build up strings of html like that. You just render JSX in structure you want. If you want to put some of that structure in a "function" then you just make a new component.

And when using react functional components, you definitely do not use this.

Try something like this, where you make a new component:

function CheckContent(props) {
  return (
    <ul>
      { props.content.map(item => <li>{ item }</li> }
    </ul>
  )
}

And now you can render that component, and pass it your data as a prop:

<td>
  <CheckContent content={games[props.game].details[detail]} />
</td>

edited Sep 29, 2021 at 5:37

answered Sep 29, 2021 at 4:28

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

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

Comments

Dave Runner · Accepted Answer · 2021-09-29 04:28:43Z

0

Instead of doing that, you can add another map to your games[props.game].details[detail], so it will be sth like this

<td>
    <ul>
        {games[props.game].details[detail].map(item => (<li>{item}</li>)}
    </ul>
</td>

answered Sep 29, 2021 at 4:28

Dave Runner

3441 silver badge5 bronze badges

1 Comment

Phil Samson Over a year ago

but i only want a <ul> if the dataset is a array, most datasets are just a string and i dont want <ul><li>singlestring</li></ul>

Collectives™ on Stack Overflow

using 'this' when calling a function inside a map

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related