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> </> ) } }
Advertisement
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> )