공청
개발하는 금융인
공청
전체 방문자
오늘
어제
  • 분류 전체보기 (102)
    • 개인적인 이야기 (27)
    • IT에 관한 글 (15)
    • 경제, 금융 (12)
    • Python (2)
    • Javascript (6)
    • golang (2)
    • 비전공자를 위한 IT 지식 (0)
    • SQL (SQLD,SQLP) (1)
    • React (Front-end) (29)
    • 정보처리기사 (0)
    • Typescript (4)
    • (study) 모던 자바스크립트 Deep Dive (0)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 방명록
  • 글쓰기

공지사항

인기 글

태그

  • react-router
  • 트래블카드
  • react
  • Effective Typescript
  • vite
  • 기술스택
  • HTTP
  • approute
  • 웹개발
  • vscode
  • 프로그래밍
  • typescript
  • next.js
  • Golang
  • 일기
  • useref
  • 조건부렌더링
  • 미국주식
  • 짧은생각
  • Fira Code
  • sql
  • 인터넷
  • WSGI
  • 창업
  • python
  • javascript
  • 언섹시비즈니스
  • go
  • ChatGPT
  • 트래블월렛

최근 댓글

최근 글

티스토리

반응형
공청

개발하는 금융인

The `style` prop expects a mapping from style properties to values, not a string 오류
React (Front-end)

The `style` prop expects a mapping from style properties to values, not a string 오류

2023. 4. 16. 00:11

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

"블로그 내의 광고와 쿠팡 링크를 클릭해주시면 블로그 운영에 큰 힘이 됩니다."

반응형

 

뜻 : 당신이 style prop에 값을 넣어야하는데 문자열을 넣었다.

 

왜 이런 오류가 뜰까?

 

말 그대로 style에는 CSS 코드 자체가 들어가야하는데 문자열을 넣었기 때문이다.

 

나는 classname에 적용한다는 것은 style에 작성해버렸다.

 

 

 

1. 오류가 난 코드

      <div style={styles.questionBox}>
        {/* {quizdata[0].choices} */}
        {quizdata[0].choices.map((choice) => (
          <div key={choice.id}>{choice.text}</div>
        ))}
      </div>

 

2. 수정한 코드

      <div className={styles.questionBox}>
        {/* {quizdata[0].choices} */}
        {quizdata[0].choices.map((choice) => (
          <div key={choice.id}>{choice.text}</div>
        ))}
      </div>

 

className에 지정해야할 것은 style에 직접 넣은 것이 아닌지 확인해보자.

반응형
    'React (Front-end)' 카테고리의 다른 글
    • React로 만든 웹을 모바일 환경에서 공유하고 싶을 때 (WebView, Navigator.share())
    • Next.js 프레임워크를 다루며 정말 도움된 YouTube 영상들
    • React의 조건부 렌더링을 사용하는 6가지 방법
    • (React Router v6) 리액트에서 라우터 사용하기-1
    공청
    공청
    투자, 프로그래밍, IT에 대한 글을 씁니다.

    티스토리툴바