Scribd Logo
Upload

Welcome to Scribd!

  • Comp

    Uploaded by

    Ken Tastic
    4 views2 pages
    This React component renders a user's profile details. It uses state hooks to control whether the profile is being edited or the bio is visible. Buttons allow toggling between viewing and editing mode, and saving or canceling edits. Conditionally different inputs or text are displayed depending on the editing state.

    Original Description:

    ceva util

    Original Title

    comp.txt

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This React component renders a user's profile details. It uses state hooks to control whether the profile is being edited or the bio is visible. Buttons allow toggling between viewing and editing mode, and saving or canceling edits. Conditionally different inputs or text are displayed depending on the editing state.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    4 views2 pages

    Comp

    Uploaded by

    Ken Tastic
    This React component renders a user's profile details. It uses state hooks to control whether the profile is being edited or the bio is visible. Buttons allow toggling between viewing and editing mode, and saving or canceling edits. Conditionally different inputs or text are displayed depending on the editing state.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    import React, { useState } from 'react';

    function ProfileDetails(props) {
    const { user } = props;
    const [isEditing, setIsEditing] = useState(false);
    const [showBio, setShowBio] = useState(false);

    function handleEditClick() {
    setIsEditing(true);
    }

    function handleSaveClick() {
    // Save the updated user details here, then
    setIsEditing(false);
    }

    function handleCancelClick() {
    setIsEditing(false);
    }

    function handleShowBioClick() {
    setShowBio(true);
    }

    function handleHideBioClick() {
    setShowBio(false);
    }

    return (
    <div className="profile-details">
    <div className="profile-details__avatar">
    <img src={user.avatarUrl} alt="user avatar" />
    </div>
    <div className="profile-details__name">
    {isEditing ? (
    <input type="text" value={user.name} />
    ) : (
    user.name
    )}
    </div>
    <div className="profile-details__username">{user.username}</div>
    <div className="profile-details__location">
    {isEditing ? (
    <input type="text" value={user.location} />
    ) : (
    user.location
    )}
    </div>
    <div className="profile-details__website">
    {isEditing ? (
    <input type="text" value={user.website} />
    ) : (
    user.website
    )}
    </div>
    {showBio ? (
    <div className="profile-details__bio">
    {isEditing ? (
    <textarea value={user.bio} />
    ) : (
    user.bio
    )}
    <button onClick={handleHideBioClick}>Hide Bio</button>
    </div>
    ) : (
    <div className="profile-details__bio">
    <button onClick={handleShowBioClick}>Show Bio</button>
    </div>
    )}
    {isEditing ? (
    <div className="profile-details__actions">
    <button onClick={handleSaveClick}>Save</button>
    <button onClick={handleCancelClick}>Cancel</button>
    </div>
    ) : (
    <div className="profile-details__actions">
    <button onClick={handleEditClick}>Edit</button>
    </div>
    )}
    </div>
    );
    }

    You might also like