React components in existing application

Question

I started adding React components to an existing website. I currently have a simple component that looks like this.

'use strict';

const element = React.createElement

class CourseForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      someObject: ''
    }
  }

  changeObject() {
    //this value will change on various events
    this.setState({ someObject: {key: value} })
  }

  render() {
    return (
      <div>

        This is a react form!

      </div>
    )
  }
}

const domContainer = document.querySelector('#react-course-form')
ReactDOM.render(element(CourseForm), domContainer)

An html element is used to show the component.

<div id="react-course-form"></div>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Load React component. -->
  <script type="text/babel" src="./js/components/CourseTabs.jsx"></script>
  <script type="text/babel" src="./js/components/CourseForm.jsx"></script>

What I would like to do is include another componen, and send it data on events from this component.

render() {
    return (
  <div>

    This is a react form!
    <button onClick={this.changeObject}>change</button>

    <div id="another-component" sendObject="this.state.someObject">
    <div id="another-component2" sendObject="this.state.someObject">

  </div>
)
}

So I basically want the child components to be aware of what someObject is because they will be displaying data from that object.

I think you need Redux https://redux.js.org/basics/basic-tutorial for the update, it will handle it well, and as far as I know this is the best way to store data. Also you can do this with props, https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react . To create a child item, you need this: https://reactjs.org/docs/components-and-props.html#function-and-class-components — golddragon007, Dec 21 '18 at 12:54

weibenfalk · Accepted Answer · 2018-12-21T13:21:00.047

1

You can create another component and import in in your CourseForm component. Then you can just use it in your render method and send it the props as you do now in your example. You're using regular divs no though so it won't work.

example:

<AnotherComponent sendObject={this.state.someObject} />

When the state updates in your CourseForm component the child components will rerender automatically with the new data to it as props.

First create your new component:

class AnotherComponent extends Component {
  // Your code goes in here. You can access the object data you send 
  // in by props by grabbing it from this.props.someObject
}

Then import it as a component in your CourseForm component:

import AnotherComponent from '.. your filepath here';

And use AnotherComponent in your render method in CourseForm:

<AnotherComponent sendObject={this.state.someObject} />

edited Dec 21 '18 at 13:21

answered Dec 21 '18 at 13:00

weibenfalk

892
7
10

if you can expand on this answer with a working example based on OPs origonal code, would be great – Nikos M. Dec 21 '18 at 13:07
I can't use import. I don't know how to use it in this app. It's a basic app. `JQuery` `HTML` `CSS`. I edited my question. It now shows how I include the components in the page. It's not a React app. Just some components. – Ciprian Dec 21 '18 at 13:36
Well .. it's still React ;) So you just have to import your component the same way you import the other ones. Actually I've never used React this way but it should work. React is only javascript in the browser in the end ... So you should be able to do something like this: `` – weibenfalk Dec 21 '18 at 13:50

React components in existing application

1 Answers1