jsxtransformer | Pipeline for transforming JSX files using Babel.js

Without the full string, it's hard to tell with certainty what could be wrong.

However, I think I might've found the issue:

GET data:image/png;base64,b'iV... ...CYII=' net::ERR_INVALID_URL

Based on the above error that you're getting, it looks like you might be missing an extra = at the end of your URI, depending on the length.

Try changing it so that it ends with CYII== and not CYII= as it seems to be currently.

Alternatively, the variable matchPlot1 might somehow be incorrect. If it has //, make sure to escape the comment.

As of React v16 React components can return an array. This was not possible prior to v16.

Doing this is simple:

Am i missed something?

Yes, you mixed two important parts: "React" and "ReactDOM". Initially react was a single lib that contained all the code but after v0.14 single lib has been splitted into two parts "react" and "react-dom".

For more details check this: React vs ReactDOM?

Solution to your problem:

You are using v0.13 so use React.render instead of ReactDOM.render. Another possible solution is use these scripts (separate libs):

Here's an example. The main App component acts as a container for all relevant information and actions. We then use child components that are used for presenting data which will be using methods that have been passed down from the container to perform actions.

Through your code, I thought you misunderstand the reason for using Reactjs and use it in a jQuery-like kind of way. With React, we should use the components in a hierarchy and composable structure. For example, in your application, we can have a root component that contains other components: Interviewer, Interviewee, AddButton, SaveButton, etc. Something similar to this:

Quite weird for me, I would write it as follows:

In react class prop is reserved. You need to use className

className

To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like

, , and others.

All your code is almost fine, but you need to make some changes to make it work correctly as you expected.

So first, you need to save the last input (number) for the countdown, so let's add lastInput: 0 into your component's state, that state will be filled when your type some number in the input field, so each time you type the lastInput property will change with the value that you set.

Once you have clicked on Stop button, you were doing only this: this.setState({ count: 0 }) but you were forgetting something else, you need to restart the property customNumber too to reset it, so you need to do this: this.setState({ count: 0, customNumber: this.state.lastInput }) where this.state.lastInput has the last value set by the user, that is for avoid to save the input's value into a local variable, so I think it's better to save that value into the component state.

NOTE

If you are using babel in your React component, it will be better using arrow function from ES6, so you can avoid the this.myfunction.bind(this) syntax so you could do it in this way:

taking your code as example it would be like this:

It could be that your script.js should be script.jsx?

It's a babel issue you're running into. Try replacing JSXTransformer with the official babel package: