Bonjour

Je tente d 'importer deux class qui sont dans des fichier js séparés au sein d'une class qui est dans un troisième fichier js. Quand je le fais avec une class ça marche mais deux non.

je teste certaines possibilité du code react tout en apprenant. Là je voulais apprendre à voir comment regrouper plusieurs fichier et class js dans un et tester les forms en react.

Voici les 3 codes :

1 ère class dans le fichier TxtCount :

Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
import React, { Component, useState }  from 'react'
 
function TheOneWhoHasTheState() {
    const [count, setCount] = useState(0);
    let NumberCount = () => {
      setCount(count + 1);
    };
    return (
      <div>
        <p>Counter is now {count}</p>
        <TheButton onClck={NumberCount} />
        <TheButton onClck={NumberCount} />
        {TheTest}
      </div>
     );
  }
 
  const TheButton = ({ onClck }) => (
    <div onClick={onClck}> Click here to add </div>
  );
 
 const TheTest = (
 <div>
     <h1> sdfsdf</h1>
 </div>
 )
 
    class Txtcount extends Component {
 
        render () {
            return (
                <TheOneWhoHasTheState/>
            )
        }
    }
 
    export default Txtcount;

le second fichier TestEvent :

Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
import React, { Component } from 'react';
class SimpleForm extends Component {
    constructor(props) {
      super(props);
 
      this.state = {
        fullName: ""
      };
    }
 
    handleSubmitForm(event) {
      alert("Full Name: " + this.state.fullName);
      event.preventDefault();
    }
 
    handleChange(event) {
      var value = event.target.value;
 
      this.setState({
        fullName: value
      });
    }
 
    render() {
      return (
        <form onSubmit={event => this.handleSubmitForm(event)}>
          <label>
            Full Name:
            <input
              type="text"
              value={this.state.fullName}
              onChange={event => this.handleChange(event)}
            />
          </label>
          <input type="submit" value="Submit" />
          <p>{this.state.fullName}</p>        
        </form>
      );
    }
  }
 
  export default SimpleForm;

le fichier app où je fusionne les deux :
Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
import React, { Component } from 'react';
import Txtcount from './TxtCount';
import SimpleForm from './TestEvent';
 
 
class App extends Component {
    render() {
      return (
        <Txtcount />
        <SimpleForm />
 
      )
    }
  }
 
  export default App;

voici le code d error :

Line 10:9: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

8 | return (
9 | <Txtcount />
> 10 | <SimpleForm />
| ^
11 |
12 | )
13 | }

Merci pour l aide