React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Bayu Candra

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

React

var data = [
  {
    name: 'student-1',
    id: 1
  },

  {
    name: 'student-2',
    id: 2
  },
  {
    name: 'student-3',
    id: 3
  }
];

function DisplayStudent(props) {
  return (
    props.studentData.map((ele) => {
      return (
        <div key={ele.id} style={{display: 'flex', padding: '9px 5px 7px 4px'}}>
          <div>{ele.name}</div>

          <button
            onClick={props.deleteStudent.bind(this, ele.id)}
          > Delete
          </button>
          <button
            onClick={() => props.deleteStudent(ele.id)}
          > Delete alternative
          </button>
        </div>
      )
    })
  )
}


class LandingPage extends React.Component {

  deleteStudent = (e) => {
    console.log('hi', this, e)
  }

  render() {
    return (
      <div>
        <DisplayStudent studentData={data}
                        deleteStudent={this.deleteStudent}
        />
      </div>
    )
  }
}

ReactDOM.render(
  <LandingPage name="World"/>,
  document.getElementById('container')
);