LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.container{
  width: 375px;
  margin: 0 auto;
}
button{
  border:none;
  background-color:lightgrey;
  width:100%;
}
button:focus {
  outline:0;
}
.section{
  overflow: hidden;
}
.selected{

}
.deselected{
  display:none; 
  overflow: hidden;
}
JS
const data=[
  {
    "title":"Section One",
    "content":`stuff adfkajsdkfgjasdklfjasdklfjklasdjf
    klasjdfkljasdklfjklasd`
  },
  {
      "title":"Section Two",
    "content":"stuff asdfasdfasdf asdf asdf asd fasdfas df asdfasdf "
  },
  {
    "title":"Section Three",
    "content":"stuff"
  },
  {
    "title":"Section Four",
    "content":"stuff"
  }
];

class Container extends React.Component{
  constructor(props){
    super(props);
    this.state={
      active:0
    }
    this.getSelected=this.getSelected.bind(this);
    this.makeActive=this.makeActive.bind(this);
    this.eventHandler= this.eventHandler.bind(this);
  }
  eventHandler(e){
    var index =parseInt(e.target.name)
    console.log(index);
    this.makeActive(index);
  }
  makeActive(index){
    
   var check=(this.state.active===index)
    if(check){ 
      this.setState({active:-1});
      console.log("Same");
     } else{
      this.setState({active:index});
      console.log("diffrent");
    }
    console.log(this.state.active)
  }
  
  getSelected(index){
 
    if(this.state.active===index){return "selected"} 
    else{ return "deselected"}
  }
  
  showList(dataInfo){
 
    var List=dataInfo.map((data,index)=>{
     return( 
       

{data.content}

) }) return List } render(){ var list=this.showList(this.props.data) return(

Simple React Accordion

{list}
) } } class Signup extends React.Component { constructor(props) { super(props); this.state = { firstname: "", lastname: "", email: "", password: "" } this.handleChange = this.handleChange.bind(this); this.handleSubmit=this.handleSubmit.bind(this); } handleChange(e) { let newState = {}; newState[e.target.name] = e.target.value; console.log(e.target.value) this.setState(newState); } handleSubmit(e){ e.preventDefault(); alert("A new user was Created for you "+ this.props.firstname.value); console.log("A new user was Create d for you "+ this.props.firstname.value); this.setState({}); } render() { return (

Sign Up





); }; } ReactDOM.render(,document.getElementById('app'));
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv