Débuts en react

Bonjour,

Je débute avec react.
Je travaille avec React et Spring, à terme j'appellerai des services rest.
Pour l'instant dans mon app mes données sont dans du JSON en dur, et ça passe

J'ai créé un composant, code ci-dessous, que j'appelle depuis mon "app.js".

C'est un tableau , qui doit afficher les éléments qu'on lui donne par la propriété "journaux".
Après je ferais des boutons pour modifier supprimer ...

Je souhaite aussi stocker les valeurs transmises dans le state local.
Mais c'est là que je bloque.
Car le code ne le trouve pas et plante au moment de la boucle en ligne 29

Si vous pouviez me dire où est mon erreur.

Citation:

Uncaught TypeError: t.map is not a function
****value
TableJournaux.jsx:29

Cordialement

Code:

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
44
45
46
47
48
49
50
 
import React from 'react';
//import { AppContext } from '../AppContext';
 
 
export class TableJournaux extends React.Component {
  //static contextType = AppContext;
 
 
  constructor(props) {
    super(props)
 
       this.state =  {
         //journaux : []
      journaux : this.props
             }      
    }
 
 
  render() {
    const { journaux } = this.state;
 
    return (
      <div>
        nombre d'éléments {journaux.length}<br></br>
 
        <table>
          <th>Code<th>Libellé</th></th>
          {
            journaux.map((journal) =>
              <tr>
                <td>{journal.code}</td>
                <td>{journal.libelle}</td>
              </tr>
            )}
        </table>
        <button onClick={() => {
          const newJournal = {
            code: 'new',
            libelle: 'Nouveau'
          }
 
          this.setState({
            journaux: [...this.state.journaux, newJournal]
          })
                }}>Ajouter un journal</button>
      </div >
    );
  }
}

import React from 'react'; //import { AppContext } from '../AppContext'; export class TableJournaux extends React.Component { //static contextType = AppContext; constructor(props) { super(props) this.state = { //journaux : [] journaux: this.props } } render() { const { journaux } = this.state.journaux; return ( <div> nombre d'éléments {journaux.length}<br></br> <table> <th>Code<th>Libellé</th></th> { journaux.map((journal) => <tr> <td>{journal.code}</td> <td>{journal.libelle}</td> </tr> )} </table> <button onClick={() => { const newJournal = { code: 'new', libelle: 'Nouveau' } this.setState({ journaux: [...this.state.journaux, newJournal] } ) }}>Ajouter un journal</button> </div > ); } }