Redesign/Refactor: Simplify data passed into GeneratorComponent.js from GeneratorList.js

[ash1eygrace]

Redesign/Refactor: Simplify data passed into GeneratorComponent.js from GeneratorList.js

[ash1eygrace]

• First, consider UX and the data the user should see to make their experience exceptional.
• Analyze the properties of the object key-value pairs to see if any are not currently being passed as props to the GeneratorComponent.
• Analyze the array of objects in GeneratorList.js to identify data that is not being used or is redundant.
• Identify data that can be moved from GeneratorList.js to GeneratorComponent.js to simplify the data flow.
• Create a new design flow that accommodates the changes made to the data flow.

Create modular issues to pick tasks of one by one and complete the entire project. (leave a comment below)

Looked over the data and the following tasks need to be to complete bring this issue to a close:

1. • title and h1 in the objects in the data are the same. Remove h1 and replace it with title and update line 41 in GeneratorComponent.js to be <h1>{title}</h1> instead of <h1>{h1}</h1>
2. • response1 in the objects in the data is not being used and will not be used. Its goal was to display a contextual message, e.g., response1: 'List of blog post ideas generated by the AI will show here.', instead, hard card the initial <Card.Text> state to say "Response from AI will show here."
3. • description2 from the objects in the data should show in the GeneratorComponent.js description under the <h1> {title} </h1>. Update line 42 of GeneratorComponent.js to be <p id="pageDescription">{description2}</p> instead of <p id="pageDescription">{description}</p>
4. • remove response1 from the objects in the data and set an initial state description for the GeneratorComponent.js to something like "Response from AI for {title} will display here."
5. • remove response2 from the generator objects in the data since and load this state within GeneratorComponent.js using the title prop. e.g.: The AI is thinking up a Response fore {title}"
6. • remove response3 from the generator objects in the data and instead display the state in GeneratorComponent.js to something like "{title} for {prompt}:" in the <Card.Header> on line 57.