Interview Preparation — React & Redux-2

Welcome to part-8 of the series and second part in React & Redux questions. You can find part-7 here.

Question 48- Explain Fragments in React 16?
Answer- React Fragments are a feature that was released in React 16.2 and it helps us to get rid of wrapper div.

Let consider the below React code. Here we have a code for Todo, which have an adjacent“h2” and a “ol” tag.

If we run the above code, we will get the familiar error.

To solve this problem, we generally wrap everything inside a <div> tag.

Now, the unnecessary “div” creates more problem then it solves. It creates problem in codes where we use Flexbox or CSS Grid as “div” is an element in itself. In Flexbox or Grid every div will be considered as an flex item or grid item.
Now, we can use Fragments instead of <div>. They also don’t have any special meaning to browser, so the problem of Flexbox and Grid is also solved.

We can also use only Fragment, if we import Fragment in the import statement.

...render() {
return (
<Fragment>
<h2>Todos:</h2>
<ol>
{this.state.items.map(item => (
<li key={item.id}>
<label>
<input type="checkbox" disabled readOnly checked={item.done} />
<span className={item.done ? "done" : ""}>{item.text}</span>
</label>
</li>
))}
</ol>
</Fragment>
)
}

You can check the JSFiddle below.

Fragment Demo

Question 49- Explain new Context API in React 16?
Answer- In a typical react application , data is passed top-down (parent to child) via props. But there are cases when props are needed by a component which is more then 2 level deep. In such a scenario, the middle components are just pass the props without using it. This issue is called prop drilling and generally solved by using state management like Redux.
But Redux is good for large application, but if our application is small or medium size it’s an overkill.

Let’s first look into the example using prop-drilling. We have a GrandFather component, which have a state called lastName. It is required by the Child component. But there is a Father component in between, so we just pass lastName through it.

const Father = ({ lastName }) => {
return <Child lastName={lastName} />
}
const Child = ({ lastName }) => {
return <p>{lastName}</p>
}

We can refactor the above to use Context. Using Context means we don’t need to pass the lastName through the <Father /> component. Here first we create our Context FamilyContext by React.createContext()

class GrandFather extends React.Component {
state = {
lastName: "Biswas"
};
render() {
return (
<FamilyContext.Provider value={this.state.lastName}>
<Father />
</FamilyContext.Provider>
);
}
}
const Father = () => {
return <Child />;
};
const Child = () => {
return <FamilyContext.Consumer>{context => <p>{context}</p>}</FamilyContext.Consumer>;
};
ReactDOM.render(<GrandFather />, document.querySelector("#app"))

Now, we have wrapped the <Father /> component with <FamilyContext.Provider /> because it contains <Child /> which is the component that needs access to the lastName prop. Notice that the Provider has a value prop. Pass in whatever state you’d like to share.

To have access to the lastName, we have also wrapped the <p> tag in the <FamilyContext.Consumer /> component so that it has access to the context.

You can check the JSFiddle below.

Context API

Question 50- Explain with example the working of input field in React?
Answer- We will use the below simple example to, see how input field works in React. It is a bit different how input boxes works in plain html.

Here, the input field have an event handler onChange. It will run whenever some changes are detected in the text box. We have some other event handler also, like below.

Image for post
Image for post
Event Handlers

In our code, it will fire the callback function onInputChange. Note, that the name of this function can be anything.

Also, notice that we have a state variable called val, which is set to empty string. Now inside the callback function onInputChange, we setState of val as event.target.value.

Now, whenever we use setState it re-renders the component. The input is told what it’s value is by value={this.state.val}
This is how input works in React and it can be summarize as below.

Image for post
Image for post

We have also created an button, on click of it will console log the current text in the input box. Below is the result.

Image for post
Image for post
Button clicked

Question 51- Explain with example the working of form in React?
Answer- We will use the below jsfiddle to understand, how form works in React. The input or any other field inside the form have a concept similar to what, we saw in Question 50.

The working of form

Notice, that in the form tag we have onSubmit event handler. In our case, it will run when we hit enter on keyboard.

Inside the callback function onFormSubmit, we have event.preventDefault(). This method tell the browser not to run the default behavior of submitting a form.

In React we handle the form submission logic by ourselves only. We are just console logging in this example. We generally submit it to a backend server.

Image for post
Image for post
Form Demo

Question 52- How do we pass data between Children and Parent component in React?
Answer- It is straight-forward to pass data between Parent component and Child component. We do it through the props system in React. But passing data in the opposite direction is a bit tricky.

We do it by using the concept of callback functions. Refer to the jsfiddle for the example.

Child to Parent Communication

Here, we have a parent component App, which renders a child component SearchComponent. The child component is same as the one , we saw in Question 51.

From the parent component, we are passing a props userSubmit which call a callback function onSearchSubmit, with a value.

Now, inside the child component SearchComponent when we submit the form we are using this.props.userSubmit(this.state.val);
So, we are passing the input text value as an argument to the prop userSubmit.

We will get the below output once we submit the form.

Image for post
Image for post
Communication demo

This concludes the part-8 of the series and second part of React & Redux questions. You will find part-9 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store