CODEWITHSUNDEEP
javascriptreactjsjsx
Paul A
Paul A

Reputation: 417

When rendering using Map how to use a variable from outside the render data object

I am wanting to render some data in JSX that includes some variables that are not in the data I a using for the render. I am not sure the best approach for the outcome I want.

WHAT I HAVE TRIED

The data object is below the map function is using a subset of this object "tableData". In the render I also trying to insert a variable called "tableStyleCol1"


  {
    id: 6,
    sectionName: 'Table: My Info',
    article: (
      <Fragment>
   <h1>This is a funky table2</h1>
      </Fragment>
    ),
    tableStyleCol1:'1',
    tableStyleCol2:'3',
    tableData:
      [
        {c1:'Hospital Number',c2:'exaMPLE - WRITE HERE'},
        {c1:' Existing Medical conditions',c2:''}
      ],
      tableType:'TableTwoColum'
  },

The code I using for the render is here

  render() {
    const sectionNumber = this.props.sectionNumber;
    const currentData = this.props.data[sectionNumber]
    const elementsRender = currentData.tableData.map(elements => {
      return (
        <div className='container-flex-row border-lightgray'>
          <div className={'table-side-header gray container-flex-grow-'+this.currentData.tableStyleCol1}>
          {elements.c1}
          </div>
          <div></div>
        </div>
      );
    });
    return <h1>{elementsRender}</h1>;
  }

Upvotes: 0

Views: 35

Answers (1)

Jatin Parmar
Jatin Parmar

Reputation: 99

Do not use this.currentData.tableStyleCol1. Just simply use currentData.tableStyleCol1

Upvotes: 1

Related Questions