讲解QandA、辅导HTML/CSS语言、讲解QandAPanel留学生

Question 1.

Let’s bring in some data. Add the QandA.json file to the src folder and use import qAndAs from './QandA.json' to import the array of questions and answers into the qAndAs variable.

Modify your React code (and CSS if you like) to display information about the questions and answers. I did something like this to show the size of the array and the format of the objects (I used JSON.stringify):

(a)

Show your modified code and screen shot here.

Question 2.

Now that we’ve gotten familiar with React let’s break down our application from earlier this year into React components. Consider the marked up screenshot shown below.

In this diagram I show breaking the application up into three main panels: a control panel, a Question and Answer and a Create Question?panel (see homework three for complete views). In addition we will put all these components into an App component that will contain the state.

(a)

Create an App component that will hold the array of questions, the current question, answer visibility as its state. Show the code for this class here (don’t show imports or exports).

(b)

Create a QandAPanel component to hold the question and answer, this component should also take some type of “show answer” property to determine whether to show the answer or not. Show the code for this class here.

(c)

Add methods to the App component to increment and decrement the current question, to toggle the answer visibility. We will need to pass these as call backs to the component in part (b). Show these new methods here.

(d)

Create a ControlPanel component that will contain all the buttons, the current question indicator, and the total number of questions. Pass the functions from part (a) in as properties and attach them as event handlers of the buttons. Change the title on the answer button to toggle between Show Answer and Hide Answer as appropriate. Make sure all these buttons work. Show code for this class here.

(e)

Finish up the application by adding functionality to show and hide the Question/Answer creator, add question, and delete current question.

Show the code for the question created class here.

(f)

Show the code for the add and delete question methods in the App class. You will be passing these to the the question creator and control panel classes.