#4 of 100DaysOfCode

#100daysofcode #react

Fourth Day,
I got mixed feelings about today.
Yesterday after making my second project, I started feeling like I am pretending to know everything but in reality, I know nothing.
~~I know what the term is, just don't wanna say it .~~😅

So, I took today's whole day for revisiting all the facts and concepts. So-called "revision".
I wasted some of my time too but I also did a remake of my yesterday's project.

My today's project :
Github Cards app but with the help of functional components this time.

const Card = (props) => {
  return (
    <div className="github-profile">
      <img src={props.profile.avatar_url} />
      <div className="info">
        <div className="name">{props.profile.name}</div>
        <div className="company">{props.profile.company}</div>
      </div>
    </div>
  );
};

const CardList = ({ profiles }) => {
  return profiles.map((profile) => <Card profile={profile} />);
};

const Form = (props) => {
  const fetchInput = (event) => {
    event.preventDefault();
    let inputData = document.getElementById("input_cardName");
    props.onSubmitHandler(inputData.value);
    inputData.value = "";
  };
  return (
    <form onSubmit={fetchInput}>
      <input type="text" id="input_cardName" />
      <button type="submit">Add Card</button>
    </form>
  );
};

const App = () => {
  const [currentProfiles, addProfile] = useState([]);
  const addCard = async (profileName) => {
    const resp = await axios.get(`https://api.github.com/users/${profileName}`);
    let profile = await resp.data;
    addProfile([...currentProfiles, profile]);
  };
  return (
    <div>
      <div>Github Cards Application</div>
      <Form onSubmitHandler={addCard} />
      <CardList profiles={currentProfiles} />
    </div>
  );
};

ReactDOM.render(<App />, mountNode);