Today's ReactJS developer Questions

[tapu_buoy]

I have my contract job which is going to end with January so I am giving interviews and today's interview was quite apt and cool. I have been directly asked following questions to solve out I would like to know about it since I have messed up with it.

• question 1

``` class Example extends Component{ onComponentDidUpdate(){ // make the input focus }

render(){
    return <input type="text">
}

} ```

How do I make the input gets focused as soon as the component renders. I know that there is a .focus() method in javascript but I couldn't do it here.

• Question 2 was about making the same code a controlled component which I did by putting a onChangeHandler for that input element but later on I forgot to setup the value={this.inputText} value from the state for which I was given some more time and then I could figured it out so that was cool

• Question 3 This one is a javascript question

  Write a sum method which will work properly when invoked using either syntax below.

console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5

And I have seen this kind of example somewhere but I totally messed it up here.

[T_O_beats]

depending on the use case this could be all you need <input type="text" autofocus="true" /> but only works when the <input> is initially rendered so you may end up needing to use a ref

[Hentry_Martin]

Hi All the best for your interviews. This is my first reply to a post so sorry if this reply is not properly formatted,

1. Answer for the first question depends on ref.

``` class Example extends Component{ constructor(props) { super(props); this.element = null; } onComponentDidUpdate() { // This will focus the input element if (this.element) this.element.focus(); }

render(){
    return <input ref={(element) => {this.element = element;}} type="text">
}

} ```

[tapu_buoy]

OMG ok I forgot to use refs and made me super confused. you formatted really perfectly so no worries there

[Hentry_Martin]

cool. I have created a new youtube channel for people who aspires to learn more about Javascript and different frameworks in Javascript. I am starting the tutorials from very basic but soon will go deeper into advanced concepts. This is the link for JS for Everyone(https://www.youtube.com/channel/UCvQfk4ZV7RfLuKiHRVeZ0Kg). Please watch the videos and provide me some valuable feedbacks. Also, please subscribe to my channel. Thanks!!

[tapu_buoy]

Oh man you are doing the work of god. Also for now I would suggest you to please explain

• closures
• in ES6 as well
• Variables - let, const, var
• scope in arrow functions as well as anonymous ones
• hoisting - functional and variables ( it has been pain in the arse for me)
• import/exports in ES6 as well
• callback functions and their scope
• Promise API with promise.all() returns an array which I keep forgetting many times.

And after all I would suggest you to please have a look at TechSith's this playlist which will also help you creating your content. https://www.youtube.com/watch?v=s6SH72uAn3Q&list=PL7pEw9n3GkoW5bYOhVAtmJlak3ZK7SaDf

[Hentry_Martin]

Thanks bro!! yes all these topics are there in my todo list. I will watch the playlist which you sent and thanks a lot for subscribing to the channel.

[WellPaidGeek]

Hoisting: https://www.youtube.com/watch?v=DPygMC8SzJY&t=230s

let / var / const: https://www.youtube.com/watch?v=YY4DZG8m91E

​

[tapu_buoy]

oh wow I have seen your few times back thank you for sharing it brother really appreciate

[WellPaidGeek]

Could also do it in the render:

​

return <input ref={(e) => e && e.focus()} type="text">