220516 react

import logo from './logo.svg';
import './App.css';
import React from 'react';

//1부터 100까지 들어있는 arr
const arr = Array.from(Array(100), (_, i) => i+1);

const button = arr.map(function(el:number):any{
  switch(true) {
    case (el %7 === 0):
      return <button key={el}>7의 배수</button>
    case (el%10 ===0):
      return false
    default:
      return <button key={el}>{el}</button>
     }
})
function App() {
  return (
    <div className ='App'>
        {button}
      </div>
  );
}

export default App;

const arr = Array.from(Array(100), (_, i) => i+1);

const button = arr.map(function(x){
  if(x%7==0){
    return <button key={x}>7의 배수</button>
  } else if(x%10==0){
    return;
  } else {
    return <button key={x}>{x}</button>
  }
})
function App() {
  return (
    <div className ='App'>
        {button}
      </div>
  );
}

export default App;

import React from 'react';
// 1부터 100까지 들어있는 arr
const arr = Array.from(Array(100), (_, i) => i+1);


const App = () => {
const handleClickButton = (item:number) => () => {alert(item);};


return (
<div>
  {arr.map(item => (
    <button
    type='button'
    key={item}
    onClick={handleClickButton(item)}
    >
      {item}
      </button>
  ))}
  

</div>
);
};
export default App;

import React from 'react';

const users =  [{
  name: 'kim',
  id: 5,
}, {
  name: 'hello',
  id: 6,
}, {
  name: 'jin',
  id: 7,
}, {
  name: 'hi',
  id: 10,
}, {
  name: 'yellow',
  id: 8,
}];

const Card = (props) => {
  return (
    <div>
      id: {props.user.id} <br />
      name: {props.user.name}
    </div>
  );
}

const App = () => {
  return (
    <>
      {users.map((user) => <Card user={user} />)}
    </>
  );
};

export default App;