리액트 key,filter,find

let arr = [
	{id: 15},
	{id:-1},
	{id:0},
	{id:3},
	{id:12.2},
	{},
	{id:null},
	{id:NaN},
	{id:'undefined'}
]

let invalidEntries = 0

function filterByID(item){//arr 있는 json 객체가 item 
if(Number.isFinite(item.id) && item.id !==0){//숫자인지 유효성 검사와 0이 아니라면
	return true //숫자를 반환
}
invalidEntries++
return false;
}
let arrByID= arr.filter(filterByID)

console.log('Filtered Array\n', arrByID)

let fruits =['apple','banana','grapes','mango','orange']

function filterItems(arr, query){ //fruits 의 모든 값들이 arr 에 들어가다
	return arr.filter(function(el){ //el 이 arr 의 모든 값들
	return el.toLowerCase().indexOf(query.toLowerCase()) !==-1
	//모두 소문자로 만들고 'ap' 을 넣어서 -1 이라면 리턴
})
}

console.log(filterItems(fruits,'ap'))

<script type="text/babel">
 const todos =[
 {id:1, value:"wash dishes"},
 {id:2, value :"Clean the bed"},
 {id:3, value : "Running"},
 {id:4, value: "Learning"}
 ];
 const App = () =>{
 const[items, setItems] = React.useState(todos);
 const handleDoneClick =(todo) =>{
 	setItems(items) =>items.filter((item) =>item !== todo));
 };
 const handleRestoreClick =() =>{//setItems에 들어갈 값은 items로 할당된다
 //첫번째 인자값(스프레드 오퍼레이터가) 현재 처리중인, 배열
 todos에서 모든 배열을 찾는데, items즉, todos에서 없는 배열이 있다면 그걸 찾아 넣는다.
 	setItems((items)=>[
    ...items, todos.find(item)=> !items.includes(item))
    ]);
 };
 return(
 <>
 {items.map((todo) =>(
 	<div key ={dotos.id}>
    	<span>{todo.value}</span>
        <button onClick={()=> handleDoneClick(todo)}>Done</button>
    </div>
 ))}
 //버튼클릭하면 handleRestoreClick 함수 실행
 <button onClick={handleRestoreClick}>Restore</button>
 </>
 );
 };
 ReactDOM.render(<App / >, document.getElementById("root"));
</script>

const arr=[
	{name:'apple', price:1000},
	{name:'banana', price:2000},
	{name:'apple', price:3000}
];

function isApple(element){
	if(element.name ==='apple'){
	return true;
}
}

const apple = arr.find(isApple){ //true 값이 리턴되는데 apple 이 true 가 아니라, 조건에 맞는 

				값이 리턴됨, 그렇네
	document.wirteln(apple.name);
	document.writeln(apple.price);
}

const arr =[

	{name : 'apple',price : 1000},
	{name : 'banana', price : 2000},
	{name : 'apple', price : 3000}
];

function isApple(element){

	if(element.name === 'apple'){
	return true;
}	
}

const apples = arr.filter(isApple);

document.writeln(apples.length);
document.writeln('<br>');
document.writeln(apples[0].name + ',' + apples[0].price);
docuemnt.writeln(apples[1].name + ',' + appples[1].price);

isApple 이 true 값을 리턴하면서 해당하는 값들을 불러 오다.

<script type="text/babel">
 const todos =[
 {id:1, value:"wash dishes"},
 {id:2, value :"Clean the bed"},
 {id:3, value : "Running"},
 {id:4, value: "Learning"}
 ];
 const App = () =>{
 const[items, setItems] = React.useState(todos);
 const handleDoneClick =(todo) =>{
 //todos 의 모든 배열이 items 에 담긴다
 items 를 필터링 하는데 각 배열을 item 으로 둬서 
item 이 todo와 같지 않다면 남겨둔다.(이 부분 이해안됨)
 	setItems(items) =>items.filter((item) =>item !== todo));
 };
 const handleRestoreClick =() =>{//setItems에 들어갈 값은 items로 할당된다
 //첫번째 인자값(스프레드 오퍼레이터가) 현재 처리중인, 배열
 todos에서 모든 배열을 찾는데, items즉, todos에서 없는 배열이 있다면 그걸 찾아 넣는다.
 	setItems((items)=>[
    ...items, todos.find(item)=> !items.includes(item))
    ]);
 };
 return(
 <>
 {items.map((todo) =>(
 	<div key ={dotos.id}>
    	<button onClick={() => handleDoneClick(todo)}>
        //handleDoneClick 이 이미 함수인데, 함수를 만들어서 이 함//수가 handleDoneClick을 실행시키게 하다. 왜? 이해가 안되네 
        	{todo.value}
            </button>
    </div>
 ))}
 //버튼클릭하면 handleRestoreClick 함수 실행
 <button onClick={handleRestoreClick}>Restore</button>
 </>
 );
 };
 ReactDOM.render(<App / >, document.getElementById("root"));
</script>

<script type="text/babel">
 const todos =[
 [
 {id:1, value:"wash dishes"},
 {id:2, value :"Clean the bed"},
 {id:3, value : "Running"},
 {id:4, value: "Learning"}
 ],
 [
  {id:1, value:"wash dishes"},
 {id:2, value :"Clean the bed"},
 {id:3, value : "Running"},
 {id:4, value: "Learning"}
 ],
 [
  {id:1, value:"wash dishes"},
 {id:2, value :"Clean the bed"},
 {id:3, value : "Running"},
 {id:4, value: "Learning"}
 ],
 [ 
  {id:1, value:"wash dishes"},
 {id:2, value :"Clean the bed"},
 {id:3, value : "Running"},
 {id:4, value: "Learning"}
 ],
 ];
 const App = () =>{
 const[items, setItems] = React.useState(todos[0]);
  React.useEffect(()=>{
 	const interval = setInterval(() =>{
    	const random = Math.floor(Math.random() * 3);
        setItems(todos[random]);
    },1000);
 const handleDoneClick =(todo) =>{
 	setItems(items) =>items.filter((item) =>item !== todo));
 };
 const handleRestoreClick =() =>{//setItems에 들어갈 값은 items로 할당된다
 //첫번째 인자값(스프레드 오퍼레이터가) 현재 처리중인, 배열
 todos에서 모든 배열을 찾는데, items즉, todos에서 없는 배열이 있다면 그걸 찾아 넣는다.

 })
 	setItems((items)=>[
    ...items, todos.find(item)=> !items.includes(item))
    ]);
 };
 return(
 <>
 {items.map((todo) =>(
 	<div key ={dotos.id}>
    	<button onClick={() => handleDoneClick(doto)}>
        	{todo.value}
            </button>
    </div>
 ))}
 //버튼클릭하면 handleRestoreClick 함수 실행
 <button onClick={handleRestoreClick}>Restore</button>
 </>
 );
 };
 ReactDOM.render(<App / >, document.getElementById("root"));
</script>