CODEWITHSUNDEEP
reactjsreact-hooks
Karim257
Karim257

Reputation: 3

Focusable Input

can someone help me finish the FocusableInput component so that the input element automatically receives focus on the first render if the shouldFocus prop is true.

The component should use React Hooks.

const FocusableInput = (props) => {
  // Write your code here
  return <input />;
};

document.body.innerHTML = "<div id='root' />";
ReactDOM.render(<FocusableInput shouldFocus={true} />, document.getElementById("root"));
setTimeout(() => console.log(document.getElementById("root").innerHTML));

Upvotes: 0

Views: 2712

Answers (7)

cngzz1
cngzz1

Reputation: 145

We can first get the "shouldFocus" attribute from the props element using JavaScript destructuring syntax. This boolean flag is used to determine whether we should focus on the input component or not.

Next, we need a way to persist the "shouldFocus" variable. Since the "shouldFocus" boolean flag is not required for rendering, we can use the useRef hook to persist the "shouldFocus" value between renders, and store it in a mutable ref object ("inputRef" in this case). We set the initial value of the ref object's "current" value to the value of "shouldFocus" in an object called "inputRef".

We then use the useEffect React hook, and pass in a callback that will invoke the "focus()" method on the "current" value of the mutable ref object element ("inputRef"). Here, we opt for the useEffect React hook since focusing on the current attribute of the mutable ref object is a side effect that can be performed at the top level of our functional component. We then get the desired result.

// React is loaded and is available as React and ReactDOM
// imports should NOT be used

const FocusableInput = (props) => {
  // Write your code here
  
  // Using the standard Javascript destructuring assignment
  // to get the boolean value of "shouldFocus" from the prop
  const { shouldFocus } = props;
  
  // Use the useRef React hook to persist the shouldFocus value between renders.
  const inputRef = React.useRef(shouldFocus);
  
  // Use the useEffect React hook to perform side effects on the 
  // inputRef React component
  React.useEffect(() => {
    // if the shouldFocus boolean flag is set to true
    if(shouldFocus){
      // focus on the specified element (in this case the inputRef)
      inputRef?.current?.focus();
    }
  }, []);
  // attach the inputRef value to the ref attribute of the input component
  // and render the input element
  return <input ref={inputRef } />;
};

// Render the FocusableInput Component
document.body.innerHTML = "<div id='root' />";
ReactDOM.render(<FocusableInput shouldFocus={true} />, document.getElementById("root"));
setTimeout(() => console.log(document.getElementById("root").innerHTML));

Upvotes: 0

user20110108
user20110108

Reputation: 1

// React is loaded and is available as React and ReactDOM
// imports should NOT be used
const FocusableInput = ({shouldFocus}) => {
const emailInputRef = React.useRef();

React.useEffect(() => {
  if(shouldFocus){
    emailInputRef.current.focus();
  }
}, []);
return <input ref={emailInputRef}/>;
};

Upvotes: 0

Irfan Quresh
Irfan Quresh

Reputation: 1

const FocusableInput = ({ shouldFocus }) => {
  const inputref = React.useRef();

  React.useEffect(() => {
    if (inputref && shouldFocus) {
      inputref.current.focus();
    }
  }, []);

  return <input ref={inputref} />;
};

document.body.innerHTML = "<div id='root' />";
ReactDOM.render(
  <FocusableInput shouldFocus={true} />,
  document.getElementById("root")
);
setTimeout(() => console.log(document.getElementById("root").innerHTML));

Upvotes: 0

Meriam Ou
Meriam Ou

Reputation: 21

// React is loaded and is available as React and ReactDOM
// imports should NOT be used
const FocusableInput = (props) => {
  // Write your code here
  const { shouldFocus } = props;
const emailInputRef = React.useRef(shouldFocus);

React.useEffect(() => {
   shouldFocus&&emailInputRef.current.focus();
}, []);
return <input ref={emailInputRef} />;

};

document.body.innerHTML = "<div id='root' />";
ReactDOM.render(<FocusableInput shouldFocus={true} />, document.getElementById("root"));
setTimeout(() => console.log(document.getElementById("root").innerHTML));

Upvotes: 2

Aabhas Jain
Aabhas Jain

Reputation: 13

I know you want this answer for TestDome, you can try below code :

const FocusableInput = (props) => {
const { shouldFocus } = props;
const emailInputRef = React.useRef(shouldFocus);

React.useEffect(() => {
emailInputRef.current.focus();
}, []);
return <input ref={emailInputRef}/>;
};

document.body.innerHTML = "<div id='root' />";
ReactDOM.render(<FocusableInput shouldFocus={true} />, 
document.getElementById("root"));
setTimeout(() => console.log(document.getElementById("root").innerHTML));

Upvotes: 1

akchauhan2.com
akchauhan2.com

Reputation: 209

const FocusableInput = (props) => {
  const { shouldFocus } = props;
  const [focus, setFocus] = React.useState(shouldFocus);

  React.useEffect(() => {
    setFocus(shouldFocus);
  }, []);
  return <input autoFocus={focus} />;
};

document.body.innerHTML = "<div id='root' />";
ReactDOM.render(
  <FocusableInput shouldFocus={true} />,
  document.getElementById("root")
);

Upvotes: 0

Karan Batavia
Karan Batavia

Reputation: 199

I believe this should do it,

const FocusableInput = (props) => {
  const {shouldFocus} = props;
  return <input autoFocus = {shouldFocus} />;
};

document.body.innerHTML = "<div id='root' />";
ReactDOM.render(<FocusableInput shouldFocus={true} />, document.getElementById("root"));
setTimeout(() => console.log(document.getElementById("root").innerHTML));

Upvotes: 2

Related Questions