DEV Community: Shoko Kimera

Simplest Way to create and pass props in React

Shoko Kimera — Sat, 26 Nov 2022 11:15:42 +0000

Create a prop

Lets say there are two components, a Parent and Child function component as seen below. Here how we can pass data from the Parent to the Child.

function Parent() {

    return (
        <>

        </>
    )
}
export default Parent;

function Child() {

    return (
        <>

        </>
    )
}
export default Child;

Step 1

create a Parent component state using the useState React hook.

import { useState } from 'react'

function Parent() {
    const [word, setWord] = useState()

    return (
        <>

        </>
    )
}
export default Parent;

Step 2

Return the Child component in the parent component

import { useState } from 'react'
import Child from './Components/Child'

function Parent() {
    const [word, setWord] = useState()

    return (
        <>
            <Child />
        </>
    )
}
export default Parent;

Step 3

We pass the props in the Child component as an argument (similar to how we do it in a regular function). We must use curly braces { } to access data defined in JavaScript and pass it as the props for Child component, In this case we pass the word state.

import { useState } from 'react'
import Child from './Components/Child'

function Parent() {
    const [word, setWord] = useState()

    return (
        <>
            <Child theWord = { word } />
        </>
    )
}
export default Parent;

Step 4

Now here’s how we utilize the passed props data in the Child component, using the curly braced { } is important for passing props without using the props object (which we’ll see later on).

function Child({ theWord }) {
    console.log(theWord)
    return (
        <>
            <p> { theWord } </p>    
        </>
    )
}
export default Child;

Extra

You can also specify a default value for your props, say we wanted the default word (when no value has been passed to word from Parent) to be “kakashi” here’s how we do it.

function Child({ theWord = "kakashi" }) {
    console.log(theWord)
    return (
        <>
            <p> { theWord } </p>    
        </>
    )
}
export default Child;

But if you pass theWord={null} or theWord={0}, the default value will not be used

How to position a footer with Tailwindcss

Shoko Kimera — Sun, 20 Nov 2022 14:36:06 +0000

I’ve always had problems with the positioning of footers in web pages I try making where I cant make the footer position stay at the bottom of the page when there isn't much content on the page and when there is enough content to fill the browser window the footer should retain its position below the main page content. Credit where credit is due, thanks to Radu for explaining this solution here.

I have however found a great solution to this problem using the Tailwindcss library classes flex flex-col h-screen and mt-auto

Step 1

Wrap the page contents in a container, either a div tag or a semantic html tag and add these tailwindcss class names.

<div className=”flex flex-col h-screen”>
    <!--content -->
</div>

// or

<main className=”flex flex-col h-screen”>
    <!--content -->
</main>

In React components just wrap the return statements in a div like so

function MainPage() {
    return(
        <div className=”flex flex-col h-screen”>
            {*/content */}
        </div>
    )

export default MainPage;

Step 2

This step is simple, just add your main page content in the parent div created in step 1 and give it the class name h-full so that it fills the parent div height (which was assigned h-screen, the screen height)

<div className=”flex flex-col h-screen”>
    <!--main page content below-->
    <div className="h-full">
        <!-- content -->
    </div>
    <div>
</div>

Follow same steps in the react component too

function MainPage() {
    return(
        <div className=”flex flex-col h-screen”>
            {*/main page content below */}
            <div className="h-full">
                {*/content */}
            </div>
        </div>
    )

export default MainPage;

Step 3

Lastly, and our target for this solution is the footer itself. The footer needs but one class to position it at the bottom of the page regardless of the amount of content in the main page content container.

This means that even if we get page content that doesn’t fill the browser window the footer is still at the bottom, and if the page content exceeds the browser window (where scrolling is then applied) the footer will remain at the bottom of the content without overlapping the content.

We do this by giving the footer a mt-auto class which will automatically place extra space in the flex box as margin at the top of the footer and if there is no space (when content is exceeds browser window) it places no margin at the top and footer remains at the bottom.

<div className=”flex flex-col h-screen”>
    <!--main page content below-->
    <div className="h-full">
        <!-- content -->
    </div>
    <div className="mt-auto">
        <!--footer content -->
    </div>
</div>

n a React app we can create the footer as its own component and just place it in every other page content component we want.

The Footer component

function Footer() {
    return(
        <div className=”mt-auto”>
                {*/ footer content */}
        </div>
    )

export default Footer;

The Main page content component

function MainPage() {
    return(
        <div className=”flex flex-col h-screen”>

            {*/main page content below */}
            <div className="h-full">
                {*/content */}
            </div>

            <Footer />
        </div>
    )

export default MainPage;

And there you have it, three easy steps to place a footer at the bottom and make it stay there.

Side Note, mb-auto class added to the div above the footer can also work instead of mt-auto on the footer itself since they both would work with the space between the footer and the main page content.

Hello W0rld

Shoko Kimera — Thu, 13 Oct 2022 20:14:55 +0000

Hello there,

This is my first post in Dev.to

Glad to be here.

Thank you.