Jason/safaribook-aspnet-core5-and-react
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Chap05 -> Using route parameters -> Creating an AnswerList component

Browse Source
This commit is contained in:
Jason Zhu 2022-03-30 16:18:22 +11:00
parent a2d892793c
commit 3414f20798
3 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
QandA/frontend/src/Answer.tsx
View File

@ -11,7 +11,7 @@ interface Props {
export const Answer = ({ data }: Props) => ( export const Answer = ({ data }: Props) => (
<div <div
css={` css={css`
padding: 10px 0px; padding: 10px 0px;
`} `}
> >

6
QandA/frontend/src/AnswerList.tsx
View File

@ -9,7 +9,7 @@ interface Props {
data: AnswerData[]; data: AnswerData[];
} }
export const AnswerList = ({ data }: Props) => { export const AnswerList = ({ data }: Props) => (
<ul <ul
css={css` css={css`
list-style: none; list-style: none;
@ -27,5 +27,5 @@ export const AnswerList = ({ data }: Props) => {
<Answer data={answer} /> <Answer data={answer} />
</li> </li>
))} ))}
</ul>; </ul>
}; );

2
QandA/frontend/src/QuestionPage.tsx
View File

@ -7,6 +7,7 @@ import { useParams } from 'react-router-dom';
import { Page } from './Page'; import { Page } from './Page';
import { QuestionData, getQuestion } from './QuestionsData'; import { QuestionData, getQuestion } from './QuestionsData';
import { AnswerList } from './AnswerList';
export const QuestionPage = () => { export const QuestionPage = () => {
const [question, setQuestion] = React.useState<QuestionData | null>(null); const [question, setQuestion] = React.useState<QuestionData | null>(null);
@ -61,6 +62,7 @@ export const QuestionPage = () => {
question.userName question.userName
} on ${question.created.toLocaleDateString()} ${question.created.toLocaleTimeString()}`} } on ${question.created.toLocaleDateString()} ${question.created.toLocaleTimeString()}`}
</div> </div>
<AnswerList data={question.answers} />
</React.Fragment> </React.Fragment>
)} )}
</div> </div>