Dynamic Forms.

Unlike previous weeks’ homework, this time I began with the CSS side of the interface first, with placeholder contents in it. I personally decided to do that because I couldn’t quite wrap my head around the concept of dynamic forms in the beginning, so I figured it’s better to do something, i.e. getting the CSS side done, than nothing.

Afterwards, I began passing forms into both the input and output components (input components are the forms whilst output are the corresponding fields in the poster). This was quite easy so I moved on to passing the values from the input component to the parent (so that it can pass it to the output component). However, I quickly realised that since the input fields are basically one component, when updating one field, the other fields will show the same values… which is quite cool except that’s not the effect we’re going for here…

Although the idea of calling functions and passing props are quite easy to grasp, understanding where to pass what wasn’t exactly as easy. This is when I really had to go back to the drawing board and learn what form inputs are. I tried to learn what attributes a form input has and well… there are quite a number of them and I am not quite familiar with them. I have to thank https://stackoverflow.com/questions/41030025/react-updating-state-in-two-input-fields-from-form-submission for helping me figure out what props to pass to which attributes and eventually helping me figure out how to solve this week’s assignment. There are a couple of modifications that I did to the codes suggested on that page, though. I received an error message when I created a variable and pass the e.target.name value into that variable in the App.js. I am yet to figure out why that is the case, but my guess is because the name attribute of my input isn’t a set value but instead a props I pass into the input from the parent, so I moved the variables into the Input.js and pass them to the parent as I invoke the onChange function in the Input.js. It worked!

Below is my final take on this week’s assignment:

REACTIVE USER INTERFACES | Week 4 | Lifting State Up

 

This week’s assignment asks us to create a poster that can change dynamically according to the input information on the left. I create two components to hold the input boxes and the poster elements respectively. I name them “Input” and “Display”. Since child components cannot talk to each other directly, the very important thing is to pass the information from the child “Input” to the parent “App” and let it pass it to another child “Display”. The way to store the input information is through “state” in “App”.

Process:

  1. Create the “Input” component and make it talk to the parent. In “App”, I create three input objects dynamically using the map function, giving them different labels and an “onChange” function. In “Input”, I create an onChange function so that whenever the input information changes, it calls the onChange function in “App” with parameters suggesting the label (which input box changes) and the input information.
  2. Create the “Display” component and make it listen to the parent. In “App”, I create three substates named “eventName”, “location” and “time” in order to store the input information in each box. I create three “Display” objects dynamically and give each of them two properties: a class name for CSS’s sake, and the content, which listens to the substates mentioned above. “Display” is a very dumb component simply for display.
  3. CSS Part, which is less significant.

Github: https://github.com/RomolaZhang/REACTIVE-USER-INTERFACES/tree/master/week4-assignment

IMA poster homework

Link to code:

https://github.com/mohosm/ReactiveUI/tree/master/Input%20Field%20Homework

I managed to do this homework using three different states for the three different texts. I didn’t like doing that, but I assumed that to parse the text differently I would have needed to do some major string-manipulation, which I didn’t felt like doing, but I’m more than inclined to try in the future.

And again, the morosely creeping suspicion that there exists a way simpler method for literally everything keeps lurking under the surface of my shaking fingers as they type out the React code line after line.

Week 3: Buttons re-do

Link to the new button project, trying to follow the steps learnt in class and remembering Parent > props > child, child > this.props. > parent (https://github.com/marykatehfk/reactive-user-interfaces/tree/master/three-buttons-project2/src)

I just had one question that I encountered while trying to write the code the same way we looked at in class, which is to have a this.props.active from the Button.js, and using the props Active in the parent to communicate with the Button. If I have it written as the screenshot:

active = {this.state.text === “Button 1”}

Somehow, this does not go through to my button, and it does not highlight the button.

However, if I call a boolean beforehand {isFirstButtonClicked} , then it works (refer to the code I posted on Github), but I am not sure why.

 

Updated Homework

https://github.com/mohosm/ReactiveUI/tree/master/DynamicCompsWithEventHandling

Redid my homework with using class updating in the css instead of :focus for styling. I also made the buttons into dynamic component. Didn’t much look at your code, it was pretty self-explanatory. I used an earlier version of the state check you showed in class for the button update though.

One question:

Inside my map function –

return <Button name={item} active={this.state.active === item} onClick={this.buttonWasClicked} key = {i} />

I was wondering why am I supposed to pass the item without the curly brackets into the active prop. When I did this: active={this.state.active === {item}}, it didn’t work. Is it because the prop should receive the item with a different parsing, or is it because the whole statement only needs one pair of brackets for the software to know how to look at every element inside of them? I’m pretty sure this latter is the right answer, but there is a chance I’m screwing something up here.

RUI – Week 03 Multi-Button UI

Repo: https://github.com/bruce55/reactive-user-interfaces/tree/week03/wed

Online demo: http://bruce-luo.me/reactive-user-interfaces/week03/class02/

The basic layout of this assignment is done purely in flexbox.

For each button, they take in a callback function from the main app, and calls it with the button label string, which is written to the main app’s state.

The currently selected button is passed in as a prop, which is used to conditionally apply the active class.

Amber// Week3: Basic Interface (Switch Button)

My code can be found here.

Process: 

My first attempt was to write three buttons under Button.js

What is out of my expectation is that they actually function pretty well, but only in either vertical or horizontal line, not both. Then I realized <Button /> component inside App.js should be it.

But the second challenge was even though I use the similar logic to trigger the function buttonWasClicked() to update the state of myChoice, and make it display on the displayingBox. It refuses to work this time. So I was making the simple flowchart below to help me understand. I realized currentChoice and myChoice are not communicated in Button.js afterbuttonWasClicked(). I realized the reason my first version worked is because in Button.Js, the communication is linked by the action of “clicking,” but now there is differentiation of different clicking, but still using the same function App.js, so it should be revised in Button.js accordingly.  in  So I made another function to communicate between myChoice and currentChoice, to pass myChoice to currentChoice.

 

 

Reflection:

The complexity of CSS styling: it was pretty easy to “recreate” the interface by hard-coding the absolute pixel and position, but to create a dynamic user interface requires the designer to think about the long-term use of different division, subdivision, and how to put things in to what division, so on and so forth. It might look the same, but what is presented on the surface is not entirely the underneath. It is so important to keep that in mind.