Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

188
Vistas
Can i put a value inside a ReactJS Component and then get that value somewhere in another file with importing?

so i am making a ReactJS Component for a contact form. And right now I want to make a method that gets the value from an input in the JSX, and then i want to get the value that that method returns from outside the component, in another file. Is this possible?

My component file:

//Inporting React.
import React from 'react';

//Creating the contactForm Component
class ContactForm extends React.Component{
    render(){
        return (
            <form onSubmit={this.props.submit} className={this.props.formclass} id={this.props.formid}>
                <div className='inputDiv'>
                    <input type="text" name="nameinput" placeholder="Name" id={this.props.nameinputid} className={this.props.nameinputclass} />
                    <input type="email" name="emailinput" placeholder="Email" id={this.props.emailinputid} className={this.props.emailinputclass} />
                    <br/>
                    <input type="text" name="subjectinput" placeholder="Subject" id={this.props.subjectinputid} className={this.props.subjectinputclass} />
                    <br/>
                    <input type="text" name="messageinput" placeholder="Message" id={this.props.messageinputid} className={this.props.messageinputclass} />
                    <br/>
                </div>
                <br/>
                <br/>
                <br/>
                <input type="submit" className={this.props.submitbtnclass} id={this.props.submitbtnid}/>
            </form>
        )
    }
}

ContactForm.defaultProps = {
    submit: "sendEmail()",
    formclass: "formClass",
    formid: "formId",
    nameinputid: "nameInputId",
    nameinputclass: "nameInputClass",
    emailinputid: "emailInputId",
    emailinputclass: "emailInputClass",
    subjectinputid: "subjectInputId",
    subjectinputclass: "subjectInputClass",
    messageinputid: "messageInputId",
    messageinputclass: "messageInputClass",
    submitbtnclass: "submitBtnClass",
    submitbtnid: "submitBtnId"
}

export default ContactForm

The file where i want to get the value:

import logo from './logo.svg';
import './App.css';
import ContactForm from './contactForm.js'


function App() {
  return (
    <ContactForm />
  );
};

export default App;
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

If you want your parent component to have access to the value of a variable within the child component, consider lifting state up to the parent component.

Suppose the value you want access to in your parent component is the user's name, which is entered in ContactForm. To implement this, first initialize the variable as a state variable in your parent component:

const [name, setName] = useState('')

useState docs

Then, pass the necessary values to your child component as props:

<ContactForm name = {name} setName = {setName} />

Components and props docs

In your child component, destructure props:

const { name, setName } = props

Finally, in your child component, change the form's onSubmit to call setName with the user's input.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda