How come the information isn't being transferred between components?

Question

How come the information isn't being transferred between components?

Is my method correct if I want to pass the this.prompt() function from TitleBar to Portfolio?

This is what my index.html file looks like:

var TitleBar = React.createClass({

  render: function() {
    return(
     <div className="jumbotron">
      <div className="container">
      <kbd className="fullName">name name</kbd>
        <button onClick={this.prompt} type="button" className="btn btn-primary portfolio">Portfolio</button>
        <button type="button" className="btn btn-primary about">About</button>
        <button type="button" className="btn btn-primary contact">Contact</button>
      </div>
      </div>

    );
  }
});

ReactDOM.render(<TitleBar/>, document.getElementById('firstBar'));

var Portfolio = React.createClass({

  this.props.prompt(
    alert("hi");
  );

  render: function() {
    return(
      <p className="text-primary">Portfolio</p>
    );
  }
});

ReactDOM.render(<Portfolio prompt={this.prompt}/>, document.getElementById('portfolio'));

Here's my index.js file:

var TitleBar = React.createClass({

  render: function() {
    return(
     <div className="jumbotron">
      <div className="container">
      <kbd className="fullName">name name</kbd>
        <button onClick={this.prompt} type="button" className="btn btn-primary portfolio">Portfolio</button>
        <button type="button" className="btn btn-primary about">About</button>
        <button type="button" className="btn btn-primary contact">Contact</button>
      </div>
      </div>

    );
  }
});

ReactDOM.render(<TitleBar/>, document.getElementById('firstBar'));

var Portfolio = React.createClass({

  this.props.prompt(
    alert("hi");
  );

  render: function() {
    return(
      <p className="text-primary">Portfolio</p>
    );
  }
});

ReactDOM.render(<Portfolio prompt={this.prompt}/>, document.getElementById('portfolio'));

javascript html css reactjs

Answer 1

Answer №1

If you're utilizing Babel as your transpiler, it's crucial to explicitly export and import the module or object:

// within the export file
var Body = //..

// at the end of the file using a named export
export Body
//-------------------------------

// inside the import file
import { Body } from './path/to/body.js'

alternatively

// within the export file
var Body = //..

// at the end of the file using a default export
export default Body
//-------------------------------

// inside the import file
import Body from './path/to/body.js'

It's important to note that this syntax is only effective when using a transpiler like Babel. Without it, you would need to utilize another module system such as CommonJS: module.exports = Body for exporting and

var Body = require('./path/to/body.js')

for importing.

Explore more about the various use cases of exports and imports on developer.mozilla.org.

Answer 2

If you're utilizing Babel as your transpiler, it's crucial to explicitly export and import the module or object:

// within the export file
var Body = //..

// at the end of the file using a named export
export Body
//-------------------------------

// inside the import file
import { Body } from './path/to/body.js'

alternatively

// within the export file
var Body = //..

// at the end of the file using a default export
export default Body
//-------------------------------

// inside the import file
import Body from './path/to/body.js'

It's important to note that this syntax is only effective when using a transpiler like Babel. Without it, you would need to utilize another module system such as CommonJS: module.exports = Body for exporting and

var Body = require('./path/to/body.js')

for importing.

Explore more about the various use cases of exports and imports on developer.mozilla.org.

Answer 3

Answer №2

In order to properly integrate the code in your files, don't forget to include export body; at the conclusion of body.js, and add

import { body } from "./relativePathTo-body.js";

at the beginning of index.js.

As a side tip: If you plan on utilizing body.prompt across multiple files, consider separating that section into its own file and then exporting it. From there, simply import the file into both index.js and body.js.

Answer 4

In order to properly integrate the code in your files, don't forget to include export body; at the conclusion of body.js, and add

import { body } from "./relativePathTo-body.js";

at the beginning of index.js.

As a side tip: If you plan on utilizing body.prompt across multiple files, consider separating that section into its own file and then exporting it. From there, simply import the file into both index.js and body.js.

How come the information isn't being transferred between components?

Answer №1

Answer №2

Similar questions

Modify the text color of all input elements with Tailwind

Creating an asynchronous function in Node.js that returns a promise, but experiencing unexpected behavior when using console.log to display the result

The toggleClass() function is only toggling between a single class

Using the `type=file` input in Internet Explorer 11

Dynamic search form technology

Displaying PHP errors in input fields

having difficulty accessing the value within the Angular constructor

Using Google API to retrieve Gmail data in Java by accessing it with an id_token obtained from JavaScript

The error message "connectDragSource is not a function" is being displayed in ReactDn

How can I set up an automatic refresh for an angularjs iframe?

Code for Custom Controllers in Strapi Beta version 3.0

Incorrect Pixel Width with Relative Positioning in Internet Explorer 11

React's input onChange event does not trigger for the second time. It only works the first time

How to use Javascript to fetch HTML content from an external website

Switch between the inner unordered list

Troubleshooting: Issue with passing variables from jQuery $.ajax to PHP

When utilizing create-react-app with an express backend, everything runs smoothly on a local machine. However, issues arise with

Having difficulty setting up multiple buttons to share the same function in jQuery using HTML

The issue with Mui's transition animation when an item's position changes within a list

Navigate to the initial visible element on the specified webpage via the page hash link