0

I am trying to pass value "red" from index.js to box.js yet not working. Basically, I have a component that defines property of box and I want to pass background color "red" from index.js to Box.js component. 

// Box.js import React from "react"; const box = { // here i would like to get the vlue name assign it to background background: this.props.name, width: "250px", height: "250px" // more code that defines how the box looks like here }; export default Box;

 /// index.js import React, { Component } from "react"; import { render } from "react-dom"; import Box from "./Box"; render() { return ( // when calling Box, I would like to pass the value red to varivable name as shown below <Box name="red"></Box> ) }

What am I missing?

Improve this question
4
  • 1
    I'm not sure I understand the question, but in general you pass values to a component via props. Commented Nov 30, 2018 at 7:34
  • 1
    The question as written is unclear - can you clean up your code snippets to show what you're actually trying? Right now most of this code is invalid JS. Commented Nov 30, 2018 at 7:38
  • is your question is passing values from one component to another Commented Nov 30, 2018 at 7:43
  • correct i would like to pass the value red from main source code to box so that red will be assigned as background color Commented Nov 30, 2018 at 7:46

2 Answers 2

Reset to default
1

You need to create a proper component:

// box.js import React from "react"; const Box = (props) => { // here i would like to get the value name assign it to background const background = props.name; const width = "250px"; const height = "250px"; // more code that defines how the box looks like here return ( // jsx code goes here ); }; export default Box;

in your second snippet, you are not using it properly

// index.js import React from "react"; import Box from "./box"; // assuming that the file name is box.js and it is in the same folder const BoxDisplay = (props) => { return ( <Box name="red"/> ); }; export default BoxDisplay;

Or if you want an actual Component:

// index.js import React, {Component} from "react"; import Box from "./box"; export default class BoxDisplay extends Component({ constructor(props) { super(props) this.state = { //any initial state you want} } render() { return (<Box name="red"/>) } });
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

box.js and index.js cannot be on the same file since box.js for two reasons. If i remove box.js some part of my code that depend on calling Box.js will fail. The second one is that I have to rewrite the same code everywhere i need box which makes the project unreasonably redundant
these are two different files - although you could combine them if you really wanted to - but I would recommend one file per component
not sure what you mean by rewriting the code - you just import box.js wherever you need it... code-reuse at its finest
got it but for some reason when i run it, it fails
can you be more specific? what fails?
|
0

There is some confusion in the question, please help us understand your problem in detail.

  • Your default export name is "card " and you are trying to import "Box".
  • what do you mean by main source code?
  • Your index.js is not having a proper component syntax

please note that you cannot use "this.props" if you are not using a class based component or constructor rather use "props"

try changing the Box component as below:

const Box = (props) => { return <p style={{background: props.name}}> Content </p> }
Improve this answer

Comments