如何使用具有地图功能的状态值在反应组件中显示重复 ui

Question

I have a react component that I have a state value that I want to use in a .map function in order to show repeat ui.

class ReviewerRequirements extends Component {
  state = {
    reviewPositions: 2
  }

  showSkillsModalUI = () => {
    const { reviewPositions } = this.state;

    var skills = reviewPositions; // user defined length
    for(var i = 0; i < skills.length; i++) {
      return <li>Value</li>[i];
     }
   }

Answer 1

Problem : you want to repeat the UI based on value in reviewPositions

map can be used on a array, but what you have is a number, i would suggest you converting this into a array and using the same for map .

    var data = [];
    var length = reviewPositions; // user defined length

    for(var i = 0; i < length; i++) {
        data.push('undefined');
    }

    const lis = data.map((position, index) => {
      return (
          <li key={index}>
            <div className="two wide column">
              <p>Role</p>
            </div>
            <div className="two wide column">
              <p># of days required</p>
            </div>
            <div className="two wide column">
              <p>From Date</p>
            </div>
            <div className="two wide column">
              <p>To Date</p>
            </div>
            <div className="two wide column">
              <p>Language Skills</p>
            </div>
            <div className="four wide column">
              <p>Content Area Skills</p>
            </div>
            <div className="two wide column">
              <p>Other Skills</p>
            </div>
          </li>
      );
    });

    render(){
      return <ul className="ui grid">
      {lis}
      </ul>
    }

Answer 2

try this

//this below code generate the n number of array based on your reviewPositions
Array.from(new Array(reviewPositions),(val,index)=>index+1)
//if reviewPositions = 2 
//result  [1,2]

 class ReviewerRequirements extends Component { state = { reviewPositions: 2 } showSkillsModalUI = () => { const { reviewPositions } = this.state; Array.from(new Array(reviewPositions),(val,index)=>index+1) .map((position, index) => { return ( <ul className="ui grid"> <li key={index}> <div className="two wide column"> <p>Role</p> </div> <div className="two wide column"> <p># of days required</p> </div> <div className="two wide column"> <p>From Date</p> </div> <div className="two wide column"> <p>To Date</p> </div> <div className="two wide column"> <p>Language Skills</p> </div> <div className="four wide column"> <p>Content Area Skills</p> </div> <div className="two wide column"> <p>Other Skills</p> </div> </li> </ul> ); }); }; }

Answer 3

You can create an array based on the number in your state and return it. Then you can use that result anywhere in your app.

 class ReviewerRequirements extends React.Component { state = { reviewPositions: 2 } showSkillsModalUI = () => { const { reviewPositions } = this.state; const list = []; for (let i = 0; i < reviewPositions; i = i + 1) { list.push( // Find a good key instead of using the iterator here. <li key={i}>Value</li> ) } return list; }; render() { return ( <div> Some other thing here. {this.showSkillsModalUI()} </div> ) } } ReactDOM.render(<ReviewerRequirements />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" />

Answer 4

Here is what I did

 showSkillsModalCategoryUI = () => { const { reviewPositions, noOfDays, options, startDate, endDate, } = this.state; var data = []; var length = reviewPositions; // user defined length for (var i = 0; i < length; i++) { data.push('undefined'); } const row = data.map((position, index) => { return ( <div key={index}> <List.Item> <div className="ui grid"> <div className="two wide column"> <p>Role</p> </div> <div className="two wide column"> <Dropdown options={options} placeholder="# of Days" search selection fluid allowAdditions value={noOfDays} onAddItem={this.handleNumberOfDaysAddition} onChange={this.handleNumberOfDaysChange} /> </div> <div className="two wide column"> <Form.Field name="startDate" label={'Start Date'} control={DatePicker} placeholder="Please select start Date" isClearable={true} selected={startDate && startDate} selectsStart minDate={moment()} startDate={startDate && startDate} onChange={this.handleStartDateChange} /> </div> <div className="two wide column"> <Form.Field name="endDate" label={'End Date'} control={DatePicker} placeholder="Please select end date" isClearable={true} selected={endDate && endDate} selectsEnd startDate={startDate && startDate} minDate={startDate && startDate} endDate={endDate} onChange={this.handleEndDateChange} /> </div> <div className="two wide column"> <p>Language Skills</p> </div> <div className="four wide column"> <p>Content Area Skills</p> </div> <div className="two wide column"> <p>Other Skills</p> </div> </div> </List.Item> </div> ); }); return row; };