Блог

Я пытался разделить свои вопросы на «страницы», чтобы отобразить разные группы входных данных, между первым и вторым вопросом это работает. Но переходя от второго к третьему вопросу, я получаю ошибку.

Может ли кто-нибудь с более свежими глазами увидеть, что происходит не так?

Я новичок в реагировании, только учусь и предполагаю, что пропустил одну или две вещи.

 ERROR: ----> index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in QuestionStageArtRadio (at Form.js:86) in div (at Form.js:85) in form (at Form.js:60) in section (at Form.js:58) in Form (at App.js:11) in main (at App.js:10) in App (at src/index.js:6) 

CODE

Form.js
---------------------------------------------------------------------------------------------------------
const Form = () => {
  const [page, setPage] = useState(0)
  const [showSummary, setShowSummary] = useState(false)
  const [inhabitants, setInhabitants] = useState('') 
  const [ageCategory, setAgeCategory] = useState('') 
  const [stageArtCategory, setStageArtCategory] = useState('')

const onPageChange = (pagenumber) => {
    setPage(pagenumber)
  }

const handleSubmit = (event) => {
    event.preventDefault();
    setShowSummary(true)
  }

return (
    <section className="form-container">
      {!showSummary ? (
        <form onSubmit={handleSubmit}>

        {page === 0 amp;amp; ( 
            <div>
            <QuestionCitySelect
              inhabitants={inhabitants}
              setInhabitants={setInhabitants}
              page={page}
              setPage={onPageChange}
            />
            </div>
        )}

        {page === 1 amp;amp; (
            <div>
            <QuestionAgeRadio
              ageCategory={ageCategory}
              setAgeCategory={setAgeCategory}
              page={page}
              setPage={onPageChange}
            />
            </div>
        )}

        {page === 2 amp;amp; (
            <div>
            <QuestionStageArtRadio
              stageArtCategory={stageArtCategory}
              setStageArtCategory={setStageArtCategory}
              page={page}
              setPage={onPageChange}
            />
            </div>
        )}

..and so forth.....
----------------------------------------------------------------------------------
QuestionStageArtRadio (the third question)
----------------------------------------------------------------------------------
import React from 'react'

import NextQuestionButton from './NextQuestionButton'

const QuestionStageArtRadio = () => ({
  stageArtCategory,
  setStageArtCategory,
  page,
  setPage,
  onNextQuestion,
  message
}) => {
  const onStageArtChange = (e) => {
    setStageArtCategory(e.target.value)
  }

  const stageart = ["I'm for experimental shit, I need to see something I can not immediately understand", "I want to dance with my kid", "Opera", "Theatre", "Musical", "I just miss the feeling of collectivity, and long to be able to see something with another person's eye - just once, please!", "Concert"]

  return (
    <article className="form-question">
      {/* Question */}
      <p htmlFor="stage" className="form-question" tabIndex="0">
        What kind of stage art would you like too experience post Covid-19?
      </p>

      {/* Answer */}
      <div className="question-content-container">
        {stageart.map((stagetype) => (
          <span key={stagetype} className="form-radiobuttons">
            <input
              name="stagetype"
              id={stagetype}
              type="radio"
              onChange={onStageArtChange}
              //checked={stageArtCategory === category}
              className="form-radiobuttons"
            />
            <label htmlFor={stagetype} aria-label={stagetype} tabIndex="0">
              <span className="form-radiobutton-input">{stagetype}</span>
            </label>
          </span>
        ))}
      </div>
      <div className="buttons-container">
        <NextQuestionButton
          page={page}
          setPage={setPage}
          currentState={stageArtCategory}
          defaultState=""
          message="Please choose what kind of stage art you would like to experience"
          onClick={onNextQuestion}
        />
      </div>
    </article>
  )
}

export default QuestionStageArtRadio

----------------------------------------------------------------------------------
NextQuestionButton.js
----------------------------------------------------------------------------------
import React from 'react'

const NextQuestionButton = ({
  page,
  setPage,
  message
}) => {
  const onNextQuestion = () => setPage(page  1)

  return (
    <>
      <button
        type="button"
        aria-label="button to the next question"
        className="next-button"
        onClick={onNextQuestion}
        message={message}
      >
        Next question
      </button>
    </>
  )
}
export default NextQuestionButton
 

У вас неправильный синтаксис в ваших вопросах stageartradio, у вас есть функция, которая возвращает функцию, которая возвращает компонент.

Снимите скобки, изменив это:

 const QuestionStageArtRadio = () => ({ /* props */ }) => <div/>
 

в это:

 const QuestionStageArtRadio = ({ /* props */ }) => <div/>