A Guide to Better Understand Props in React.js!

Props are essential in any React.js application as they simplify the flow of data! They allow you to pass data from parent to child, thus making your code more dynamic as well as reusable.

What are they?

As mentioned briefly in the intro, props, is how data is passed from one component to another. It is crucial to understand that they are uni-directional, meaning they could only be passed down from a parent component to a child component. They *cannot * be passed from sibling to sibling.

Here is a basic example:

function ParentComponent() {
  const data = "Hello from Parent!";
  return <ChildComponent greeting={data} />;
}

function ChildComponent(props) {
  return <p>{props.greeting}</p>;
}

These functions are two different components in an React app. The parent component has data that the other component cant access without it being passed down. the props parameter allows the child component have access to that data. But what if you had another component that wanted to use that data? Simple! You pass it down to that component as well!.

You might be wondering, "What else can I do with props?" and the answer to that is a lot. You can even pass down functions as props which allows child components to communicate with parent components by invoking the passed down functions.

Here is an example from my personal project I did this week:

function App() {
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    fetch(API)
      .then(resp => resp.json())
      .then(data => setCharacters(data))   
  }, [])

  function addCharacter(character) {
    fetch(API, {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json', 
      },
      body: JSON.stringify(character)
  })
  .then(response => response.json())
  .then(json => setCharacters([...characters, json]))}

  return (
     <Router>
      <div className="container">
        <Header />
        <Routes>
          <Route path="/" element={<CharacterPage characters={characters} />} />
          <Route path="/create" element={<CreateCharacter addCharacter={addCharacter} />} />
          <Route path="/search" element={<Search />} />
          <Route path="/search/:searchTerm" element={<Results />} />
        </Routes>
      </div>
     </Router>
  )
}

function CreateCharacter ({ addCharacter }) {
    const [characterInfo, setCharacterInfo] = useState(initialCharcterInfo)

    function handleSubmit(e) {
        e.preventDefault()

        addCharacter(characterInfo)
        setCharacterInfo(initialCharcterInfo)}

    function handleChange(e) {
        const key = e.target.name
        const newCharacterInfo = {
            ...characterInfo,
            [key]: e.target.value
        }
        setCharacterInfo(newCharacterInfo)}

    return (
        <div className="form-container">
            <form onSubmit={handleSubmit}>
                <input type="text" name="fullName" placeholder="Enter Full Name" value={characterInfo.fullName} onChange={handleChange}/>
                <input type="text" name="title" placeholder="Enter Title" value={characterInfo.title} onChange={handleChange}/>
                <select name="family" value={characterInfo.family} onChange={handleChange}>
                    <option value="House Stark">House Stark</option>
                    <option value="House Lannister">House Lannister</option>
                    <option value="House Baratheon">House Baratheon</option>
                    <option value="House Greyjoy">House Greyjoy</option>
                    <option value="House Tyrell">House Tyrell</option>
                    <option value="House Bolton">House Bolton</option>
                    <option value="Free Folk">Free Folk</option>
                    <option value="House Targaryen">House Targaryen</option>
                    <option value="House Mormont">House Mormont</option>
                    <option value="misc">misc</option>
                </select>
                <input type="text" name="imageUrl" placeholder="Enter Image URL" value={characterInfo.imageUrl} onChange={handleChange}/>
                <input type="text" name="bio" placeholder="Enter Bio" value={characterInfo.bio} onChange={handleChange}/>
                <button type="submit" className="character-submit">Create Character</button>
            </form>
        </div>
    )}
export default CreateCharacter;

As you can see the function addCharacter that was used in order to post data to my db.json file was passed down from my App.jsx (parent) component to my CreateCharacter.jsx (child) via some {} curly brackets. And I wanted to use this again elsewhere in another child component I can! That's the beauty of Props in React.js.

Hoped you enjoyed my beginner guide for Props in React.js!