REACTJS - need help passing table row data to modal class

Question

I just want to pass table all of the row data to modal class and call every single data, but I'm still learning on react. Currently my modal class is still in static data. I really want to learn react please help how to pass the all of the row data to modal class. Here's my current code.

Modal class the data is still in static.

class Modal extends React.Component {
constructor (props) {
super(props)

this.state = {
  modalOpened: false
}

this.modalToggle = this.modalToggle.bind(this)
}

modalToggle () {
this.setState({ modalOpened: !this.state.modalOpened })
}
render () {
const coverClass = this.state.modalOpened ? 'modal-cover modal-cover-active' 
: 'modal-cover'
const containerClass = this.state.modalOpened ? 'modal-container modal-container-active' : 'modal-container'
return (
  
    
    
      
        
        Number: 11231564243
      
      
        
          
            
              Status:
              NEW
            
          
         
      
      
        
      
    

    
  
)
}
}

const Row = ({Date, Id, Name, Title, Status, 
index}) => (

   {Date}
   {Id}
   {Name}
   {Title}
   {Status}
   

);

table class ------------------------------

class Table extends React.Component {
constructor(props) {
super(props);

this.state = {
  data: [
    {
      Date: '',
      Id: '',
      Name: '',
      Title: '',
      Status: ''
    },
  ],
};
this.compareBy.bind(this);
this.sortBy.bind(this);
  }
componentWillReceiveProps(nextProps) {
  if( Object.keys(nextProps.orders).length) {
      this.setState({data: nextProps.orders});
  }
}

  compareBy(key) {
return function (a, b) {
  if (a[key] < b[key]) return -1;
  if (a[key] > b[key]) return 1;
  return 0;
};
  }

  sortBy(key) {
let arrayCopy = [...this.state.data];
arrayCopy.sort(this.compareBy(key));
this.setState({data: arrayCopy});
  }

  render() {
const rows = this.state.data.map( (rowData, index) => );
return (
  
        {rows}
    
    
      
       this.sortBy('Date')} >Date
       this.sortBy('Id')}>ID
       this.sortBy('Name')}>Name
       this.sortBy('Title')}>Title
       this.sortBy('Status')}>Status
      Action
      
    
    
  
);

  }
}

parent class --------------------------

export class OrdersView extends React.Component {
//API Data-----------------------------------
constructor(props) {
super(props)
this.state = {
  saved: false,
  orders: {},
  value: ''
};
}
//onchange start date
handleOnChangeFrom(e) {
this.setState({
  from: e.target.value,
});
}
//onchange end date
handleOnChangeTo(e) {
this.setState({
  to: e.target.value,
});
}  
filterClick = () => {
// @notice, call the api endpoint only when the component has been mounted.
//EXAMPLE Orders retrieval
//this.state.from and this.state.to value are passed on handleonchange
//npm install dateformat
var dateFormat = require('dateformat');
var dStart = this.state.from;
var dEnd= this.state.to;

var dateStart = dateFormat(dStart, "dd/mm/yyyy");
var dateEnd = dateFormat(dEnd, "dd/mm/yyyy");

const params = {
    startDate: dateStart,
    endDate: dateEnd,
}
LambdaService.getOrdersAsync(params)
.then((orders) => {
    this.setState({
        orders: orders
    });
})
.catch(err => {
    alert('no orders available on the selected range of date');
});
}

render () {
const {username} = this.props;
const bgStyle = {background: "url(img/sample.jpg)"};
const {
  orders: orders
  } = this.state
return (
  
      
      <div className='StatusColumn details col-lg-3 col-md-3 col-sm-12 col-xs-12' style={bgStyle}>
        <div className="StatusColumnInner">
        <h3 className='dashboard--header'>{username} Order's</h3>
        </div>
      </div>
      <div className='details col-main-content col-lg-9 col-md-9 col-sm-12 col-xs-12'>
        <div className='MainColumn'>
          <span className='order-span-style'>From </span>
          <input type="date" id="from" value={this.state.from} onChange={ (e) => this.handleOnChangeFrom(e) } />
          <span className='order-span-style'>To </span>
          <input type="date" id="to" value={this.state.to} onChange={ (e) => this.handleOnChangeTo(e) } />
          <button className="button-order-style" onClick={this.filterClick.bind(this)}>Run Report</button>
          <Table orders={orders}></Table>
        </div>
      </div>
  </div>
)
}
}
OrdersView.propTypes = {
username: PropTypes.string,
}
export default OrdersView
</code></pre>

RCL · Accepted Answer

after hours of research i found an answer.

I added all the values to modal button

const Row = ({Date, Id, Name, Title, Status, 
Quantity, Price, index}) => (

   {Date}
   {Id}
   {Name}
   {Title}
   {Status}
   
      
    

);

and call the data to modal using this example {this.props.Status}

class Modal extends React.Component {
constructor (props) {
super(props)

this.state = {
modalOpened: false
}

this.modalToggle = this.modalToggle.bind(this)
}

modalToggle () {
this.setState({ modalOpened: !this.state.modalOpened })
}
render () {
const coverClass = this.state.modalOpened ? 'modal-cover modal-cover-active' 

: 'modal-cover'
const containerClass = this.state.modalOpened ? 'modal-container modal-
container-active' : 'modal-container'
return (



  
    
    Number: 11231564243
  
  
    
      
        
          Status:
          {this.props.Status}
        
      
     
  
  
    
  




)
}
}

REACTJS - need help passing table row data to modal class

Answers (1)

Related Questions