React Resume maker

Header.js

// example where i am using this editable p tag

import React,{useState} from 'react'
import Text from './Text';



const Header = () => {
  
//   i want to grab the data from this text file and append it as an object so that i can store it to database later on
    return (
        <>
            <header className="inline-flex items-baseline justify-between w-full mb-3 align-top border-b-8">
                <div className="block">
                    <Text className="mb-1 text-5xl font-bold text-gray-750" data-text="Narottam Sahu" name = "Header" />
                    {/* <!--Job Title---------------------------------------------------------------------------------------------------------> */}
                    <Text className="m-0 ml-1 text-2xl font-semibold text-gray-700 leading-snugish" data-text="Full Stack Web Development" name = "subHeader" />
                    {/* <!--Location ---------------------------------------------------------------------------------------------------------> */}
                    <Text className="m-0 mt-2 mb-2 ml-1 font-semibold text-md text-gray-550 leading-snugish" data-text="Mumbai, India"  name = "location" />
                </div>
            </header>
        </>
    )
}

export default Header

Text.js

import React, { useState,useReducer } from 'react'

const reducer = (state,action) => {
    if(action.type === 'ADD_VALUE') {
        return {
            ...state,
            [action.name]: action.value
        }
    }
    else {
        return state
    }
}
const Text = ({ ...props }) => {

    // using useReducer
    const initialState = {
        
    }

    const [state, dispatch] = useReducer(reducer, initialState)
    
    const handleChange = (e) => {
        const name = e.target.getAttribute("name")
        const value = e.target.innerHTML
        dispatch({type:'ADD_VALUE', name: name, value: value})
        console.log(state)
    }

    // using useState
    const [data, setData] = useState({
        Header:'',
        subHeader: '',
        location: ''
    })

    // it runs when a user type on the field
    const handleChange = (e) => {
        const name = e.target.getAttribute("name")
        const value = e.target.innerHTML
        setData({...data,[name]:value })
        console.log(data)
    }
    return (
        <div className="" >
            <p
                id="output"
                className="selectableTextArea "
                contentEditable
                {...props}
                value = {data}
                onKeyUp = {handleChange}
                suppressContentEditableWarning
                spellCheck='false'
            >
            </p>
        </div>
    )
}

export default Text