Prova

index.html

<div id="root"></div>
<div id="testata">
<div>

prova.markdown

Prova

A Pen by angelicaCruz on CodePen.

License.

script.babel

function Add(props){
  return (
    <button onClick={props.onClick}>
      {props.descr}
     </button> 
  )
};

function Edit(props){
  handleClick = () => {
    alert('ciao');
  }
  
  return (
    <button onClick={props.onClick}>
      {props.descr}
     </button> 
  )
};

function Delete(props){
  return (
    <button>
      {props.descr}
     </button> 
  )
};

function Archive(props){
  return (
    <button>
      {props.descr}
     </button> 
  )
};

let runArray = [
  {
    run : 'C012345',
    baseline : 'C000000',
    description : '670 SoS Week 05 - Hpoly - Lite23 - R-Rim w Ribs – WT-opt1 – small scoop – fat paletta – fwd cave ent'
  }, 
  
  {
    run : 'C012345',
    baseline : 'C000000',
    description : '670 SoS Week 05 - Hpoly - Lite23 - R-Rim w Ribs – WT-opt1 – small scoop – fat paletta – fwd cave ent'
  }, 
  
  {
    run : 'C012345',
    baseline : 'C000000',
    description : '670 SoS Week 05 - Hpoly - Lite23 - R-Rim w Ribs – WT-opt1 – small scoop – fat paletta – fwd cave ent'
  }, 
]

function RunList(props){
  return(
    <div>  
      <table>
        <tr>
          <th>Run</th>
          <th>Baseline</th>
          <th>Description</th>
        </tr>
        
       {props.runs.map(run => <RunTable {...run} />)}	
      </table>     
     
    </div>
  )
}

function RunTable(props){
  return(
    <tr>
      <td key={props.run}>{props.run}</td>
      <td key={props.baseline}>{props.baseline}</td>
      <td key={props.description}>{props.description}</td>
    </tr>
  )
}


class Testata extends React.Component{
  //costruttore if needed
  constructor(props){
    super(props);
    this.state = {
      runs : runArray,
    }
  };
  
  handleEdit = () => {
    alert(this.state.runs.length);
  };
  
  handleAdd = () => {
    
    newRunArray = this.state.runs
    
    newRunArray.push(
      {
          run : "C111111",
          baseline : "C000000", 
          description : "descr"
        }
    )
    
    this.setState({
      runs : newRunArray
    })
  };
  
  render(){
    return(
      <div>
         <Add 
           descr='Add'
           onClick={() => this.handleAdd()}/>
         <Edit descr='Edit'
                // non va bene onClick={this.handleEdit()} perché a ogni re-render, chiama la funziona handleEdit.
                onClick={() => this.handleEdit()}/>
         <Delete descr='Delete'/>
         <Archive descr='Archive'/>
        <RunList runs={this.state.runs}/>
        <br />
      </div>
    )
  }
}

ReactDOM.render(<Testata />, document.getElementById('testata'));

scripts

<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

table, th, td {
  border: 1px solid black;
}