React component not returning expected value when imported into another component [duplicate]

Question

I am having trouble getting a boolean value from a separate component file to display properly in my main App.js file.

I created a separate file called Component.js where I defined a boolean variable called "test" and exported it. In App.js, I imported the variable and logged it to the console. However, the console is showing me the entire Component function definition instead of the boolean value.

This is my App.js:

import React, { useState } from "react";
import "./App.css";
import test from './Component'

export default function App() {
  console.log(test)
  return (
    <>
   </>
  )
}

This is my Component.js

import React, { useState } from "react";

export const test = true;

export default function Component() {

}

Srushti Shah · Accepted Answer · 2023-04-10 13:15:21Z

2

You have imported the default export import only test module

import React, { useState } from "react";
import "./App.css";
import { test } from './Component'

export default function App() {
  console.log(test)
  return (
   <>

   </>
  )
}

answered Apr 10, 2023 at 13:15

Srushti Shah

9945 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React component not returning expected value when imported into another component [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related