모달창 관련문의

[굿굿굿]

//waring 메시지 없애는 방법
/* eslint-disable*/

import './App.css';
import { useState } from 'react';
//React jsx 문법을 사용함

//post DB라고 가정하고

// 블로그 글 제목에 넣을 려면
//이건 자바스크립트
// document.querySelectorAll('h4')[1].innerHTML = post;

//state 라는 문법은 자료를 보관하는 역할
// let [a, b] = useState('남자 코트 추천');

function App() {
  let [글제목, 글제목변경] = useState(['나자 코트 추천', '가자 코트 추천', '다이썬 독학']);
  //따봉변경을 변경을해야 바뀜
  let [따봉, 따봉변경] = useState([0, 0, 0]);
  //set이 관습임
  //모달창이 보이고 안보이고 하는 기능 useState안에
  // 아무거나 넣어도 상관없음 내 방식대로 
  let [modal, setModal] = useState(false);
  let [title, setTitle] = useState(0);
  //map 함수 사용법
  //결국 map 함수가 for문이라고 보면 됨
  //array 자료에 1, 2, 3 이면 3번 반복함
  
  return (
    <div className="App">
      <div className="black-nav">
        <h4 style ={{color: 'white', fontsize: '16px'}}>ReactBlog</h4>
      </div>

      <button onClick={()=>{
        var newArray = [...글제목];
        newArray = newArray.sort();
        글제목변경(newArray);
      }}>가나다순정렬</button>

      <button onClick={()=>{
   
        let copy = [...글제목];
        copy[0] = '여자코트추천';
        글제목변경(copy);
      }}>글수정</button>

      {/* 수정해야함 다 눌림 */}
      {
        // 파라미터 안에 들어있는 i는 1씩 증가하는 함수가 된다.

        글제목.map((a ,i)=>{
          return(
          <div className="list">
            <h4 onClick={()=>{setModal(true); setTitle(i)}}>{글제목[i]}<span onClick={()=>{
              let copy = [...따봉];
              copy[i] = copy[i] + 1;
              따봉변경(copy)}}>👍</span>{따봉[i]}</h4>
            <p>2월 17일 발행</p>
            {
            //html이기 대문에 if문을 쓸수 없다
            //만약에 쓰고 싶으면 삼항연사자를 써야한다
            //식은 : 조건식 ? 참일때 실행할 코드 : 거짓일 때 실행할 코드
            //props 사용법 작명 = {안에들갈 함수}
            //귀찮으면 글제목 = {글제목}해도 상관없음
            //부모 -> 자식 state 전송하려면 props 문법사용하면 됨
            //자식에서 부모는 불가능하고 나란히 옆에 있는건 불가능
            modal == true ? <Modal 글제목변경 = {글제목변경} 글제목 = {글제목} title = {title}></Modal> : null
            }
          </div>
          )
        })
      }
      <button onClick={()=>{setTitle(0)}}>글제목 0</button>
      <button onClick={()=>{setTitle(1)}}>글제목 1</button>
      <button onClick={()=>{setTitle(2)}}>글제목 2</button>

      
      
      {/* modal을 fuction 으로 만들고 쓰는것을 
      컴포넌트라고 함 */}
      
      
      </div>
      
  );
}

function Modal(props){
  return(
    
    <>
     <div className="modal">
      {/* props사용법 */}
       
        <h4>{props.글제목[props.title]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
        {/* //props사용해서 할것 */}
        <button onClick={()=>{
          props.글제목변경(['여자 코트 추천', '가자 코트 추천', '다이썬 독학']);
        }}>글수정</button>
      </div>
    </>
  )
}

export default App;

모달창이 3개가 동시 작동해요.. 해결 방법을 모르겠어요

[굿굿굿]

선생님 이 부분은 해결했는데 버튼클릭시 반응을 하지 않습니다. 


        글제목.map((a ,i)=>{
          return(
          <div className="list">
            <h4 onClick={()=>{setModal(true); setTitle(i)}}>{글제목[i]}<span onClick={()=>{
              let copy = [...따봉];
              copy[i] = copy[i] + 1;
              따봉변경(copy)}}>👍</span>{따봉[i]}</h4>
            <p>2월 17일 발행</p>
          </div>
          )
        })
      }
      <button onClick={()=>{setTitle(0)}}>글제목0</button>
      <button onClick={()=>{setTitle(1)}}>글제목1</button>
      <button onClick={()=>{setTitle(2)}}>글제목2</button>
      {
        //html이기 대문에 if문을 쓸수 없다
        //만약에 쓰고 싶으면 삼항연사자를 써야한다
        //식은 : 조건식 ? 참일때 실행할 코드 : 거짓일 때 실행할 코드
        //props 사용법 작명 = {안에들갈 함수}
        //귀찮으면 글제목 = {글제목}해도 상관없음
        //부모 -> 자식 state 전송하려면 props 문법사용하면 됨
        //자식에서 부모는 불가능하고 나란히 옆에 있는건 불가능
        modal == true ? <Modal 글제목변경 = {글제목변경} 글제목 = {글제목} title = {title}></Modal> : null
      }

[codingapple]

버튼누르면 모달창도 열어달라고 코드짭시다

[글쓴이]

글