JSFiddle - React, Tailwind, and code Playground

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

const items = [1, 2, 3, 4];
let bool = true;

class First extends React.Component {
	constructor(props){
    super(props);
  }
  
  render(){
    return (
      <div style={{display: bool ? "block" : "none"}}>
        {
          this.props.arr.map((value, idx) => {
            return <li key={idx}>{value}</li>
          })
        }
      </div>
    )
	}
}

class App extends React.Component {
  render(){
    return (
      <div>
  	  <button onClick = {() => {bool = !bool; console.log(bool);}}>Click to show list</button>
      <First arr = {items}/>
  	</div>
    )
  }
}

let target = document.getElementById('root');
ReactDOM.render(<App />, target); 



/* const items = [1, 2, 3, 4];
class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      tech: 'select',
      items: items
    };
  }

  render(){
    return (
      <div>{items.map((item,idx) => <li key={idx}>{item}</li>)}</div>
    )
  }
}

let target = document.getElementById('root');
ReactDOM.render(<App />, target); 
 */









/* 
const items = [
  { name: 'a', age: 21 },
  { name: 'b', age: 20 },
  { name: 'c', age: 20 }
];

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      items: items
    };
  }

  render(){
    let k = items.map(item => {
      const container = {};
      container[item.name] = item.age;
      container.aaa = item.name
      return container
    })
    console.log(k)
    return (
      <div>{items.map((item,idx) => <li key={idx}>{item}</li>)}</div>
    )
  }
}

let target = document.getElementById('root');
ReactDOM.render(<App />, target);
 */