how to Iterate through data and pass them into a component in reactjs

I already created a menu button which display some default value, shows below.

And I have a table which have the data I need,

return (
                        <UitkTableRow {...row.getRowProps()}>
                            {row.cells.map((cell) => {
                                return <UitkTableCell {...cell.getCellProps()}>{cell.render('Cell')}</UitkTableCell>
                            })}

                            {row.cells.map((cell) => {
                                if(cell.column.Header == "Notes"){
                                    console.log(cell)//print result shows below

                                    return  <div style={{margin:'10px 0px 0px 0px'}}>
                                        <NotesSelection />
                                    </div>
                                }
                            })}

                        </UitkTableRow>
                    )

I want to put the value, “DELETE COMMENT 1” in my menu list, how can I do this?

I tried something like this, loop through the cell, but got error “cell.map” is not a function

{cell.map(c => {
                                                return (
                                                    <div>display</div>
                                                )
                                            })}

Edit:

const {value} = cell
                                    {
                                        value.map(c => {
                                            return  <div>
                                                <NotesSelection />
                                            </div>
                                        })
                                    }

interface NotesSelectionProps {
  selectNotes(note:string): string;
}

class NotesSelection extends React.Component<NotesSelectionProps, { show: boolean, noteS: string, value: string }> {
  constructor(props: any) {
    super(props);
    this.state = {
      show: false,
      noteS: "",
      value: "",
    };
    note = notes.notes[0].name
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e: any) {
    const previousState = this.state['show'];
    this.setState({
      show: !previousState,
      noteS: note,
      value: "",
    });
    arrowState = previousState ? " ˅" : " ˄"
  }

  onMenuItemClick(name: string) {
    note = name
    this.setState({
      show: false,
      noteS: note,
      value: "",
    });

    this.props.selectNotes(note)
    arrowState = " ˅"
    return;
  }


  render() {
    var name = this.props
    var noes: any = []
    notes.notes.forEach(element => {
      var note = {
        className: 'uitk-list-item',
        label: element.name,
        onClick:  () => this.onMenuItemClick(element.name),
        typeAnchor: true,
        target: "_blank"
      }
      noes.push(note)
    });

    noes.push(value)
    var buttonStyle = {
      padding:'5px',
      width:'170px',
      display:'flex',
      justifyContent:'space-between',
      background:'white',
      borderRadius: "10px",
      border:'1px solid rgba(0,0,0,.1)',
      fontSize: '14px',
      boxShadow: '0px 2px 2px rgb(0 0 0 / 10%)'
    };

    return (
        <><div>

          <UitkMenu
              id="show10"
              isOpen={this.state.show}
              onTriggerClick={this.handleClick}
          >
            <UitkMenuTrigger >
              <button style={buttonStyle}>
                <div className="notes">
                  {note}
                </div>
                <div className="arrowState">
                  {arrowState}
                </div>
              </button>
            </UitkMenuTrigger>
            <UitkMenuContainer position={PositionType.LEFT} width={200}>
              <UitkMenuList items={noes} />
            </UitkMenuContainer>

          </UitkMenu>
        </div>
        </>
    )
  }
}

Answer

Since you need to modify the menu list (NotesSelection) pass the value to that component and render it there.

NotesSelection component

interface NotesSelectionProps {
  selectNotes(note:string): string;
}

class NotesSelection extends React.Component<NotesSelectionProps, { show: boolean, noteS: string, value: string }> {
  constructor(props: any) {
    super(props);
    this.state = {
      show: false,
      noteS: ""
    };
    note = notes.notes[0].name
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e: any) {
    const previousState = this.state['show'];
    this.setState({
      show: !previousState,
      noteS: note
    });
    arrowState = previousState ? " ˅" : " ˄"
  }

  onMenuItemClick(name: string) {
    note = name
    this.setState({
      show: false,
      noteS: note
    });

    this.props.selectNotes(note)
    arrowState = " ˅"
    return;
  }


  render() {
    var name = this.props
    var noes: any = []
    notes.notes.forEach(element => {
      var note = {
        className: 'uitk-list-item',
        label: element.name,
        onClick:  () => this.onMenuItemClick(element.name),
        typeAnchor: true,
        target: "_blank"
      }
      noes.push(note)
    });

    noes.push(value)

    var buttonStyle = {
      padding:'5px',
      width:'170px',
      display:'flex',
      justifyContent:'space-between',
      background:'white',
      borderRadius: "10px",
      border:'1px solid rgba(0,0,0,.1)',
      fontSize: '14px',
      boxShadow: '0px 2px 2px rgb(0 0 0 / 10%)'
    };

    return (
        <><div>

          <UitkMenu
              id="show10"
              isOpen={this.state.show}
              onTriggerClick={this.handleClick}
          >
            <UitkMenuTrigger >
              <button style={buttonStyle}>
                <div className="notes">
                  {note}
                </div>
                <div className="arrowState">
                  {arrowState}
                </div>
              </button>
            </UitkMenuTrigger>
            <UitkMenuContainer position={PositionType.LEFT} width={200}>
              <UitkMenuList items={noes} />
            </UitkMenuContainer>

          </UitkMenu>
        </div>
        </>
    )
  }
}

Table component

return (
                        <UitkTableRow {...row.getRowProps()}>
                            {row.cells.map((cell) => {
                                return <UitkTableCell {...cell.getCellProps()}>{cell.render('Cell')}</UitkTableCell>
                            })}

                            {row.cells.map((cell) => {
                                if(cell.column.Header == "Notes"){
                                    console.log(cell)//print result shows below

                                    return  <div style={{margin:'10px 0px 0px 0px'}}>
                                        <NotesSelection value={cell.value} />
                                    </div>
                                }
                            })}

                        </UitkTableRow>
                    )