Currently, I am learning React and facing an issue with a warning message: "react-dom.development.js:86 Warning: React does not recognize the isSelected prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isselected instead. If you accidentally passed it from a parent component, remove it from the DOM element."
This warning only pops up occasionally when I render my Survey component, sometimes requiring me to reload the page multiple times before it shows.
In my Survey component, I have two clickable buttons labeled "yes" and "no" for answering questions. The goal is to add a box-shadow CSS property to the selected answer, which I achieved using CSS-in-JS with a conditional statement. While this works correctly, the warning persists...
Below is the code snippet of my Survey element:
// various imports
const SurveyContainer = styled.div`...
`;
const QuestionTitle = styled.h2`...
`;
const QuestionContent = styled.span`...
`;
const LinkWrapper = styled.div`...
`;
const ReplyBox = styled.button`
// other CSS properties
box-shadow: ${(props) =>
props.isSelected ? `0px 0px 0px 2px ${colors.primary} inset` : "none"};
&:first-child {
margin-right: 15px;
}
&:last-of-type {
margin-left: 15px;
}
`;
const ReplyWrapper = styled.div`
// CSS properties
`;
function Survey() {
const { questionNumber } = useParams();
const questionNumberInt = parseInt(questionNumber);
const prevQuestionNumber =
questionNumberInt === 1 ? 1 : questionNumberInt - 1;
const nextQuestionNumber = questionNumberInt + 1;
const [surveyData, setSurveyData] = useState({});
const [isDataLoading, setDataLoading] = useState(false);
const { answers, saveAnswers } = useContext(SurveyContext);
const [error, setError] = useState(false);
function saveReply(answer) {
saveAnswers({ [questionNumber]: answer });
}
useEffect(() => {
async function fetchSurvey() {...
}
fetchSurvey();
}, []);
if (error) {...
}
return (
<SurveyContainer>
<QuestionTitle>Question {questionNumber}</QuestionTitle>
{isDataLoading ? (
<Loader />
) : (
<QuestionContent>{surveyData[questionNumber]}</QuestionContent>
)}
<ReplyWrapper>
<ReplyBox
onClick={() => saveReply(true)}
isSelected={answers[questionNumber] === true}
>
Yes
</ReplyBox>
<ReplyBox
onClick={() => saveReply(false)}
isSelected={answers[questionNumber] === false}
>
No
</ReplyBox>
</ReplyWrapper>
<LinkWrapper>
<Link to={`/survey/${prevQuestionNumber}`}>Previous</Link>
{surveyData[questionNumberInt + 1] ? (
<Link to={`/survey/${nextQuestionNumber}`}>Next</Link>
) : (
<Link to="/results">Results</Link>
)}
</LinkWrapper>
</SurveyContainer>
);
}
export default Survey;
I need to find a way to use the prop for the CSS validation without triggering the error. Maybe I cannot write "isSelected={answers[questionNumber] === true}" in the "ReplyBox" because it's a button styled-component rather than another React component? However, I still require a button...
Is there any alternative to a prop that could provide the same outcome?