title: Using useRef to assign focus to an element that conditionally exists
body: <p>I am having some trouble trying to implement this functionality which creates an input field component upon clicking a button, and then assigning focus to the input field as well. I am getting an error saying that inputRef.current is undefined, and am not sure how to proceed.</p>
  <pre><code>export default function Post(props) {
    const inputRef = React.useRef();
    const [commentsToggle, setCommentsToggle] = React.useState(false);
  
    function commentClickHandler() {
      setCommentsToggle((prev) =&gt; !prev);
      inputRef.current.focus();
  }
  
  return (
  &lt;div className=&quot;post&quot;&gt;
    &lt;div className=&quot;postAuthor&quot;&gt;
      &lt;Avatar
        {...stringAvatar(`${props.post.author.username}`)}
        alt={`${props.post.author.username}'s Avatar`}
        src=&quot;./placeholder.jpg&quot;
        variant=&quot;rounded&quot;
        style={avatarStyle}
      &gt;
        {props.post.author.username[0].toUpperCase()}
      &lt;/Avatar&gt;
      &lt;b&gt;{props.post.author.username}&lt;/b&gt; posted:
    &lt;/div&gt;
    &lt;p className=&quot;postContent&quot;&gt;{props.post.content}&lt;/p&gt;
    &lt;p className=&quot;postDate&quot;&gt;{props.post.formatted_date}&lt;/p&gt;
    &lt;span className=&quot;postButtonContainer&quot;&gt;
      &lt;IconButton className=&quot;starsButton&quot; onClick={starClickHandler}&gt;
        {props.post.stars.includes(userInfo.userID) ? (
          &lt;StarIcon /&gt;
        ) : (
          &lt;StarBorderIcon /&gt;
        )}
        {props.post.stars.length}
      &lt;/IconButton&gt;
      &lt;Tooltip title=&quot;Add a comment.&quot; placement=&quot;right&quot;&gt;
        &lt;IconButton className=&quot;commentsButton&quot; onClick={commentClickHandler}&gt;
          {commentsToggle ? &lt;ChatBubbleIcon /&gt; : &lt;ChatBubbleOutlineIcon /&gt;}
          {props.post.comments.length}
        &lt;/IconButton&gt;
      &lt;/Tooltip&gt;
    &lt;/span&gt;
    &lt;hr&gt;&lt;/hr&gt;
    &lt;div&gt;
      &lt;CommentList comments={props.post.comments}&gt;&lt;/CommentList&gt;
      {commentsToggle ? (
        &lt;NewCommentInput
          ref={inputRef}
          targetPostURL={props.post.url}
          getUserData={props.getUserData}
          setCommentsToggle={setCommentsToggle}
        &gt;&lt;/NewCommentInput&gt;
      ) : null}
    &lt;/div&gt;
  &lt;/div&gt;
  );
  }
  </code></pre>
  <p>The above is the code from my parent component, which will conditionally render the child component (the input) that I want to receive focus. Below is this input component:</p>
  <pre><code>const NewCommentInput = React.forwardRef((props, ref) =&gt; {
  return (
  &lt;form className=&quot;commentInput&quot; onSubmit={commentSubmitHandler}&gt;
    &lt;TextField
      ref={ref}
      multiline
      fullWidth
      size=&quot;small&quot;
      name=&quot;comment&quot;
      placeholder=&quot;comment on this post...&quot;
      value={commentState.content}
      onChange={commentChangeHandler}
    &gt;&lt;/TextField&gt;
    &lt;Button variant=&quot;outlined&quot; onClick={commentSubmitHandler}&gt;
      Comment
    &lt;/Button&gt;
  &lt;/form&gt;
  );
  });
  </code></pre>
  <p>How can I solve inputRef.current being undefined when I click the button that create the component that has the ref?</p>