react js how to pass input value to another component

Question

I have a form component named Form.js, I imported this component into Profile.js, I want to transfer the input value from the Form.js component to Profile.js (For a more illustrative example, you can see the picture https://ibb.co/tsRNCR6). I have deliberately removed a few lines of code from jsx to shorten the code.

Profile.jsx

import React, {useState} from 'react';
import "./css/style.css"
import {Calendar} from "react-calendar";
import 'react-calendar/dist/Calendar.css';
import {DateTimeProfile} from "./Month/Clock";
import {UserCertificates} from "./ProfileContent/UserCertificate/UserCertificates";
import {AboutFormUsers} from "./ProfileContent/AboutFormUser/AboutFormUsers";

export const Profile = (props) => {

    const [value, onChange] = useState(new Date());

    if (!props.profile) {
        return <p>Loading...</p>
    }

    return (
        <div>
            <div className="contentProfile">
                <div className="userProfileInfo">

                    <div style={{margin: "20px"}}>
                        <div>
                            <AboutFormUsers {...props} />
                        </div>
                    </div>
                </div>

                <div className="achivements">
                    <div className="achivementsTitleContainer">

                        <div>
                            <div className="achivementsTitle">
                                <h3>Keep on completing achievements and become one of the best coders</h3>

                                <p>The input value should be here</p>
                            </div>
                        </div>
                    </div>

                    <div className={"centerColumnLine"}>
                        <hr/>
                    </div>
                </div>

                <div className="messages">
                    <div className="DateTimeProfile">
                        <DateTimeProfile/>
                    </div>

                    <div>
                        <Calendar onChange={onChange} value={value} className={"Calendar"}/>
                    </div>

                    <div>
                        <UserCertificates/>
                    </div>
                </div>
            </div>
        </div>
    )
}

AboutFormUsers.jsx

import React from 'react';
import './css/style.css';

export class AboutFormUsers extends React.Component {

    state = {
        user: '',
    };

    handleChange = (event) => {
        const input = event.target;
        const value = input.value;

        this.setState({ [input.name]: value });
    };

    handleFormSubmit = (event) => {
        localStorage.setItem('user', this.state.user);
        event.preventDefault(); //отменяем отправку формы
    };

    componentDidMount() {
        const user = localStorage.getItem('user');
        this.setState({ user });
    }

    render() {
        return (
            <div className={"aboutFormContainer"}>
                <form onSubmit={this.handleFormSubmit}>
                    <div className={"aboutUser"}>
                        <p>Write about yourself</p>
                    </div>
                    <div>
                        <label>
                            <textarea name="user" className={"textarea"} value={this.state.user} onChange={this.handleChange}/>
                        </label>
                    </div>

                    <div>
                        <button type="submit">Sign In</button>
                    </div>

                </form>
            </div>
        );
    }
}

michael · Accepted Answer · 2020-11-18 02:10:10Z

You can pass an event callback to AboutFormUsers component. In AboutFormUsers component, call this callback when the input value is changed. Please check below for deail.

Profile.jsx

export const Profile = props => {
  ...
  const [inputValue, setInputValue] = useState('');
  ...

  return (
    <div>
      ...
      <AboutFormUsers {...props} onChangeInput={setInputValue} />

      ...
      <div className="achivementsTitle">
        <h3>
          Keep on completing achievements and become one of the best
          coders
        </h3>

        <p>{inputValue}</p>
      </div>

      ...
    </div>
  );
};

AboutFormUsers.jsx

export class AboutFormUsers extends React.Component {
  ...
  handleChange = event => {
    const input = event.target;
    const value = input.value;

    this.setState({[input.name]: value});
    this.props.onChangeInput(value);
  };
  ...
}

Collectives™ on Stack Overflow

react js how to pass input value to another component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related