React Mock Interview

Interviews are always a nerve-wracking thing to do! You spend hours upon hours studying Data Structures and Algorithms, Youtube top programming interview questions and answers, and think of all of the possible questions the interviewer can ask you.

Thanks to Flatiron School, I was able to prepare for a mock interview to go through these same trials and tribulations as my peers. I am writing this blog post to encourage my fellow aspiring software developers to take every interview opportunity that you can, because just like programming, practice makes perfect. Here is how my mock interview went.

1) The Meet - n - Greet
During the first 10-15 minutes of my mock interview, I introduced myself to my interviewer and told him my story of becoming a software developer. This was a key point for me in my interview process because I can demonstrate my soft skills and how my previous work experience as a sales rep in the tech world can benefit my transition to a developer position. Focus on your strong points, and really show your passion for software development and eagerness to learn. In other words, SELL YOURSELF!

2) Technical Q&A

During the technical Q&A portion of my interview, I was asked a handful of React questions. Here were some of the questions that I was asked:

• What is React?

• What are the differences between functional and class components?

• What is the virtual DOM? How does react use the virtual DOM to render what the user sees?

• Explain React state and props.

• What is prop drilling in React?

Make sure that your answers are clear and straight to the point. The interviewer told me the worst thing a candidate can do is ramble on about a topic that does not relate to the questions at hand. Simply say, " I do not know the answer to the question". Now here is where you can differentiate yourself: don't be afraid to ask questions! These are the times that interviewers want to know how you think.

3) Live Coding

My live coding challenge was to build the following:
Build a React Component that displays the given data
with the functionality of sorting that data and adding rows.

import "./styles.css";
import Row from "./row";
import React, { useState } from "react";

// Build a React Component that displays the given data
// with the functionality of sorting that data and adding rows.

const DATA = [
  { id: 0, name: "John", email: "[email protected]" },
  { id: 1, name: "Jane", email: "[email protected]" },
  { id: 2, name: "Joe", email: "[email protected]" }
];

export default function App() {
  const [name, SetName] = useState("");
  const [users, SetUsers] = useState(DATA);

  const handleChange = (event) => {
    SetName(event.target.value);
  };

  const handleSubmit = (event) => {
    const newUser = {
      id: users.length,
      name: name,
      email: `${name}@gmail.com`
    };
    SetUsers([...users, newUser]);
  };


  return (
    <div className="App">
      {users.map((user) => (
        <Row key={user.id} name={user.name} email={user.email} />
      ))}
      <input type="text" value={name} onChange={handleChange} />
      <button onClick={handleSubmit}> Push Here! </button>
    </div>
  );
}

Now, here is what my row.js folder looks like:

import React from "react";

function Row(props) {
  return (
    <h1>
      {props.name}, {props.email}
    </h1>
  );
}

export default Row;

All the user has to do is enter their name, and that would autogenerate a gmail account for the user. This is taken care of by the handleSubmit method above. After time was up, my instructor encouraged me to add on the ability to edit and delete users as well.

Stay tuned for more!

Happy Coding!